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]