WordPress 嵌入 Youtube 影片連結（不用外掛 ）

WP喵

WordPress 嵌入 Youtube 影片連結方法




Step 1 先取得 Youtube 連結

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



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



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


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



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




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

Step 3 調整CSS 讓影片能 RWD

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

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




點選最下方的「附加的 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 連結設定

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




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

[HTML] 純文本查看 複制代碼

<div class='youtube-rwd'>

後面增加

[HTML] 純文本查看 複制代碼

</div>

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

[HTML] 純文本查看 複制代碼

<div class='youtube-rwd'>[embed]https://www.youtube.com/watch?v=Hlp8XD0R5qo[/embed]</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%。