WordPress 如何嵌入響應式YouTube 影片 - 程式教練Mars

嵌入Youtube 影片連結 Skiptocontent 想要在WordPress上面播放影片，有2種方法。

第1種是直接上傳影片檔案，例如上傳MP4的影片檔。

第2種是將Youtube的影片嵌入在網頁之中，使用這種方式有個好處是減少WordPress站台本身的流量頻寬。

我知道有一些人架站時選擇低費用的主機，網路頻寬較小，流量也有限制，所以要放影片時，建議還是從Youtube平台上取得連結再嵌入網頁之中就好。

當直接把Youtube影片嵌入在WordPress時，可能會遇到一個問題，有些佈景主題沒有寫好Youtube影片符合響應式網頁，就會在手機上超出螢幕範圍。

網頁上的Youtube影片太大，左右兩邊超出畫面了。

接下來我會分享如何從Youtube複製連結到WordPress上播放影片，並設定符合響應式(RWD)網頁的自動縮放功能。

目錄1嵌入Youtube影片連結2加入CSS響應式(RWD)影片縮放2.1加入CSS語法2.2設定Youtube連結設定2.3修改方法說明3使用外掛解決響應式縮放4重點整理 嵌入Youtube影片連結 先開啟Youtube影片播放頁面，在影片下面點擊「分享」鈕。

將分享連結複製下來。

在WordPress編輯頁執行「新增媒體」。

選擇左邊的「從網址插入媒體」。

再將剛剛複製的網址貼上即可。

完成這裡，Youtube影片就放入WordPress網頁之中了喔。

這是電腦觀看時的畫面，影片左右有些畫面超出範圍了。

若在手機上觀看時，超出螢幕範圍就會更大。

此問題是因為沒有設定影片符合響應式(RWD)網頁縮放。

加入CSS響應式(RWD)影片縮放 加入CSS語法 點選「外觀>自訂」。

點擊「附加的CSS」。

加入以下CSS語法 CSS .youtube-rwd{ position:relative; padding-bottom:56.25%; } .youtube-rwdiframe{ position:absolute; top:0; left:0; width:100%; height:100%; } 123456789101112 .youtube-rwd{    position:relative;    padding-bottom:56.25%;}.youtube-rwdiframe{ position:absolute;    top:0;    left:0;    width:100%;    height:100%;} 貼上後按「發佈」。

設定Youtube連結設定 回到文章的編輯網頁，剛剛加入影片連結後，點選「文字」(原始碼功能)，可以看到原始語法。

使用「從網址插入媒體」嵌入Youtube連結都會變成這樣的語法。

接下來就在語法的前面增加 後面增加 完成後的影片語法就變這樣。

如果你是直接從Youtube複製分享連結的話，可以套用以下格式： [embed]{你的Youtube分享連結}[/embed] [embed]使用時要把(空格拿掉) 簡單來說就是將Youtube複製好的連結，前面及後面增加一點語法就行了。

修改後，就可以重新測試一下我們的影片了。

電腦瀏覽時，就可以看到完整的畫面。

在手機瀏覽時，也可以自動縮小影片。

修改方法說明 要在CSS上增加youtube-rwd設定是為了在Youtube影片外增加響應式縮放設定。

所以在Youtube貼上連結時，才需要特別加上…語法。

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

使用外掛解決響應式縮放 如果不熟悉CSS語法不敢亂修改的話，可以試試外掛解決喔。

可以安裝外掛EmbedPlusforYouTube 安裝啟用後，在選單會增加「YoutubeFree」功能，打開後在第1頁的設定畫面，下方找到「ResponsiveVideoSizing:」，將此功能打勾就可以了喔。

打勾之後，所有Youtube影片就會自動縮放了喔。

因為是免費的外掛，難免會有一些廣告喔。

重點整理 執行Youtube分享鈕取得連結 在WordPress按「從網址插入媒體」插入影片 附加CSS使影片在手動上自動縮放 影片RWD有使用EmbedPlusforYouTube外掛解決 推薦課程 全方位學WordPress–從架站到整合行銷 WordPress部落格課程：開始您自己的事業 相關學習文章 WordPress點擊圖片放大效果-EasyFancyBox外掛教學 WordPress修改主題樣式(style.css)–常用4招教學 如果你在學習上有不懂的地方，可以參考線上家教服務 如果你喜歡這篇文章，請幫我在上方綠色的拍手圖示按5下使用Google或FB免費登入，你的鼓勵支持我繼續創作，寫出好的文章 [加入社團一起討論]或是[追蹤Instagram] 文章導覽 (限量學費補助)【百萬課程學院】手把手教你如何專業變現賺到100萬WordPress適用響應式(RWD)瀏覽圖片燈箱效果外掛-WPLightbox2 發佈留言取消回覆發佈留言必須填寫的電子郵件地址不會公開。

必填欄位標示為*留言顯示名稱* 電子郵件地址* 個人網站網址 在瀏覽器中儲存顯示名稱、電子郵件地址及個人網站網址，以供下次發佈留言時使用。

熱門文章 WindowsServer如何安裝SQLServer2019免費開發版-9,966views如何申請免費Let’sEncryptSSL自動更新憑證，自架IIS站台適用-6,375views[C#]取得證交所台股價格的3種實用方法(附範例下載)-5,823viewsSQLServer每日定期備份與定期刪除舊有備份檔-4,873views[開箱]ASUSE510MA夢幻白15.6吋平價文書筆電開箱評價-3,358views[ASP.NETMVC]如何套用Bootstrap網頁設計樣版SBAdmin2開發網站管理介面(附範例)-3,208viewsWindowsServer安裝MySQLCommunity免費社群版-3,184views如何將亂碼簡體檔名、資料夾在繁體電腦正常顯示-使用ConvertZZ免費軟體-3,146viewsWindowsServerIIS如何安裝PHP網頁伺服器-2,956viewsWindowsServer2019如何安裝IIS運行ASP.NET專案-2,927views 點擊贊助 近期文章 [WinForm]如何使用WebBrowser顯示Echarts圖表(附範例) 不要只會寫程式，做為軟體工程師必備的6項能力 微軟整合開發工具VisualStudio2022安裝教學 [ASP.NETMVC]使用ECharts建立股票K線圖(附範例下載) [ASP.NETMVC]QRCode製作與Base32編碼應用(附範例下載) 學習目標在這裡我會向你分享網頁設計相關的技術文章。

包含WordPress,ASP.NetC#為主的技術文章。

以及伺服器管理及資料庫應用的知識文章。

我是Mars，我們一起學習成長吧。

是否有問題需要我協助，或是網頁設計及WordPress提案合作，可與我聯絡。

程式教練Mars粉絲頁 程式教練Mars 訂閱電子報 訂閱電子報 當有最新文章時，會發送郵件通知你。

訂閱 Loading... 感謝你的訂閱 請至你的信箱開啟驗證確認信。

訂閱完成後，未來有新文章時，將會寄發郵件通知你。