WP喵 發表於 2022-5-10 14:31:12

WordPress 嵌入 Youtube 影片連結(不用外掛 )

WordPress 嵌入 Youtube 影片連結方法




Step 1 先取得 Youtube 連結

先開啟 Youtube 影片播放頁面,在影片下面點擊「分享」鈕。



接著按下「複製」將連結複製起來



Step 2 WordPress編輯頁面中 新增媒體


在 WordPress 編輯頁面按下「新增媒體」按鈕。



並選擇左邊的「從網址插入媒體」。再將剛剛複製的網址貼上即可。




Youtube 影片就放入 WordPress 網頁當中了喔。

Step 3 調整CSS 讓影片能 RWD

調整CSS以便讓 Youtube 影片能 RWD 響應式 符合螢幕

先加入 CSS 語法
點選「外觀 > 自訂」




點選最下方的「附加的 CSS」,不管用那個布景主題都會有。
並加入以下 CSS 語法



.youtube-rwd {
    position: relative;
    padding-bottom: 56.25%;
}

.youtube-rwd iframe {
      position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


貼上後按「發佈」即可


Step 4 調整 Youtube 連結設定

回到文章的編輯網頁,在剛剛加入影片連結的文章中,點選「文字」(原始碼功能)切換到原始語法視窗。




接下來就在語法的前面增加

<div class='youtube-rwd'>

後面增加

</div>

完成後的影片語法就變這樣。

<div class='youtube-rwd'>https://www.youtube.com/watch?v=Hlp8XD0R5qo</div>




所以在 CSS 上增加 youtube-rwd 設定就是為了在貼上Youtube 連結時,方便外層 加上 <div class='youtube-rwd'>…</div> 語法,來達到將 Youtube 影片 RWD的目的。

CSS 語法中的 padding-bottom: 56.25%;,是因為影片高度與寬度的比例 16:9 計算得來,9 除以 16 = 0.5625 換算高度比 0.5625=56.25%。












頁: [1]
檢視完整版本: WordPress 嵌入 Youtube 影片連結(不用外掛 )