神魂顛倒論壇

 取回密碼
 加入會員
搜尋
檢視: 5222|回覆: 0
收起左側

[教學] WordPress 嵌入 Youtube 影片連結(不用外掛 )

[複製連結]
發表於 2022-5-10 14:31:12 | 顯示全部樓層 |閱讀模式
WordPress 嵌入 Youtube 影片連結方法




Step 1 先取得 Youtube 連結

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

1652163168531.jpg

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

1652163224357.jpg

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


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

1652163570053.jpg

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


1652163915032.jpg

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

Step 3 調整CSS 讓影片能 RWD

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

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


WP外觀自訂.jpg

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

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

1652164724172.jpg


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

[HTML] 純文本查看 複制代碼
<div class='youtube-rwd'>


後面增加

[HTML] 純文本查看 複制代碼
</div>


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

[HTML] 純文本查看 複制代碼
<div class='youtube-rwd'>[embed]https://www.youtube.com/watch?v=Hlp8XD0R5qo[/embed]</div>


1652165808895.jpg


所以在 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%。












您需要登入後才可以回帖 登入 | 加入會員

本版積分規則

Archiver|手機版|小黑屋|Flash2u論壇

GMT+8, 2024-3-29 22:59 , Processed in 0.115828 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回覆 回到頂端 返回清單