最後更新日期:2024 年 7 月 7 日
本篇文章教你在 WordPress 的文章中插入 YouTube 影片時,也可以有響應式 (Responsive) 的效果,也就是影片尺寸會跟隨著螢幕尺寸自動調整。
透過程式碼片段 (Code Snippets) 外掛,可以輕鬆製作出一個簡單的短代碼 (Shortcode),讓你的影片尺寸永遠不會跑版!

YouTube 影片沒有響應式的情形
目前主要是發現在傳統編輯器嵌入 YouTube 影片,會發現手機的影片特別長,個人認為響應式做的不太好。
下面有兩張圖,分別是傳統編輯器影片比例、古騰堡編輯器影片比例,可以看得出在傳統編輯器的比例不太好。


如果是用古騰堡編輯器的人,恭喜你,不需要看這篇文章。
如果是用傳統編輯器的人,建議你也可以考慮換成古騰堡編輯器,畢竟是官方預設的編輯器,但是我知道轉換編輯器需要滿大的時間+修改,所以就繼續看下去吧!
透過外掛解決
其實可以很簡單的透過 Embed Plus for YouTube 這款外掛來解決,只要勾選設定的 Responsive all videos 就可以完成。
但是畢竟外掛能省就省,而且這款外掛還有其他功能,可能會用不到,造成浪費的情況。
所以還是繼續看下去吧!

程式碼片段是什麼?
程式碼片段 Code Snippets 是一款可以增加程式碼在網站中的外掛,最大的好處就是很好管理,而且不受佈景主題更換而影響。
詳細內容可以查看之前的教學:

利用程式碼片段嵌入響應式 YouTube 影片
step 1
首先,安裝完程式碼片段後,點選新增程式碼片段。

step 2
輸入一個好辨認的標題,接著貼上以下程式碼。
add_shortcode( 'yt', 'custom_youtube_responsive' ); function custom_youtube_responsive($atts) { // shortcode attributes $atts = shortcode_atts( array( 'id' => '' ), $atts, 'yt' ); $id = $atts['id']?$atts['id']:''; if($id){ $content = '<div class="youtube_responsive_css"><iframe width="640" height="360" src="https://www.youtube.com/embed/'.$id.'" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>'; return $content; } else{ return '<p>No Youtube ID!</p>'; } } add_action( 'wp_footer', function () { ?> <style> .youtube_responsive_css { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; max-width: 100%; } .youtube_responsive_css iframe, .youtube_responsive_css object, .youtube_responsive_css embed .youtube_responsive_css video{ position:absolute; top:0; left:0; width:100%; height:100%; } } </style> <?php } );

step 3
用途說明隨意填寫,我是習慣把用法寫上去。
接著點選設定並啟用。

step 4
到新增文章的地方,輸入短代碼。
用法:[yt id="影片的 id"]
假設說,今天要嵌入的 YouTube 影片是
https://www.youtube.com/watch?v=zZC-FYjGvt0
我們就抓後面的 v= … 這段,所以 id 就是 zZC-FYjGvt0。
範例:[yt id="zZC-FYjGvt0"]

step 5
短代碼輸入後,接著再來用手機螢幕看看,就有響應式 RWD 的效果了!

補充小說明
這段程式碼適用於一般有側邊欄的文章頁面,如果是全寬的頁面,可能會造成影片尺寸過大。
大家基本上使用上面那段就夠了,這裡是給特殊需求的人使用!
這時候只要改成用以下程式碼就可以解決:
add_shortcode( 'yt', 'custom_youtube_responsive' ); function custom_youtube_responsive($atts) { // shortcode attributes $atts = shortcode_atts( array( 'id' => '' ), $atts, 'yt' ); $id = $atts['id']?$atts['id']:''; if($id){ $content = '<div class="youtube_responsive_css"><iframe width="640" height="360" src="https://www.youtube.com/embed/'.$id.'" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>'; return $content; } else{ return '<p>No Youtube ID!</p>'; } } add_action( 'wp_footer', function () { ?> <style> @media (max-width: 1000px){ .youtube_responsive_css { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; max-width: 100%; } .youtube_responsive_css iframe, .youtube_responsive_css object, .youtube_responsive_css embed .youtube_responsive_css video{ position:absolute; top:0; left:0; width:100%; height:100%; } } </style> <?php } );
最主要就是在 CSS 多一段 @media (max-width: 1000px) 限制螢幕寬度的部分,可以改裡面的 1000px,符合自己想要的寬度。
結論
本篇文章教大家利用程式碼片段 Code Snippets 輕鬆解決嵌入 YouTube 影片響應式的問題,希望對大家有幫助!
其實用外掛解決很簡單,但是多裝一個外掛,就是替網站多增加一個負擔。
所以適時的用一些程式碼來解決小問題,是最棒的方法!
WordPress 線上課程推薦
阿璋正在籌備 WordPress 線上課程,如果有興趣的人,歡迎點擊下方連結。
從 0 開始建立部落格
站長之路手把手教你如何透過部落格開始賺錢,內容包含 WordPress、部落格經營、網路行銷,帶你成為一個成功的部落格站長!
WordPress 架站推薦
新手架站:【架站教學】專門為WordPress打造的主機?WPWebHost 完整教學!高流量網站:【架站教學】新手快速架站教學,使用Cloudways架設WordPress網站!
新手必看: WordPress 必裝主題與外掛推薦、學習管道、最新優惠統整!
學習更多:查看我是如何透過 WordPress 架設部落格,賺取人生第一桶金!
WordPress 學習書籍推薦
WordPress 無敵架站手冊:架站新手都想擁有:教你打造個人專屬網站

書籍介紹
這本書教你從零開始建立起一個全功能的WordPress網站,從下載與安裝WordPress主軟體開始到連結、媒體、選單、圖像、展示區、管理、用家建檔等等。 甚至還有教你如何開發主題、外掛、小工具,從入門到進階的教學都很完整。推薦原因
這本書原作者是波蘭人,原文是英文,後來經由免費資源網路社群的作者 Pseric 翻譯成中文書。 WordPress 目前的中文書可說是少之又少,這本不僅是中文書,內容又非常完整,絕對是學習WordPress的首選書籍!購買 WordPress 無敵架站手冊
WordPress Plugins百大外掛精選(火力加強版)

書籍介紹
這本書教你從基礎架站、備份保存到各式各樣的外掛主題,讓你想裝什麼就裝什麼,建置專屬自己獨一無二的多功能發佈平台。 作者特別精選了各類型的外掛做介紹,只要你想的到的功能幾乎都在裡面,匯集了讀者們一直喜愛的外掛程式介紹,並且添加了最新的外掛程式,更貼近現在的讀者需求。推薦原因
這本書作者是免費資源網路社群的作者 Pseric,他的網站知名度非常的高,也是透過 WordPress 架設而成,因此對於外掛的理解,絕對是數一數二。購買 WordPress Plugins 百大外掛精選(火力加強版)
支持阿璋的新書《打開網路就有錢》,裡面分享許多自媒體以及投資理財的知識,非常適合網路創業者以及想要增加額外收入的上班族閱讀。
如果你對幣圈資訊有興趣,可以訂閱此電子報:幣圈最新資訊
我目前有成立一個亞洲最大的幣圈自媒體 Discord 社群:Crypto Mind 加密腦
推坑阿璋超愛的商品,歡迎加入團購群:阿璋好物團購 LINE 社群
12篇文章手把手教你如何透過部落格開始賺錢:站長之路
更多相關社群連結:工具王阿璋社群列表
本站有部分連結與商家有合作關係,透過我的連結購買,我會獲得少數佣金,讓我可以持續營運網站,但並不會影響您的任何權益,詳情查看免責聲明。
如果我的文章對你有幫助,歡迎贊助我一杯咖啡!
本站所有內容皆為阿璋個人經驗分享,如有涉及投資請謹慎評估,阿璋不做任何投資建議。
文章引用請來信索取授權,否則將保留法律追訴權。
by Johntool-工具王阿璋
我使用您說的Code Snippets這個方式
嵌入網址 一直無法成功
後來用Embed Plus for YouTube這個外掛解決了
感謝
總之問題有處理就好~
謝謝阿璋,非常實用!
不會哦~
不知道版主有沒有遇到這個問題,我貼上影片網址時,有時候可以正常出現影片,有時候瀏覽文章又變成單純的網址,請問這要怎麼解決呢?
我自己沒遇過哦
謝謝 解決問題了
很棒的内容,学习到了……
不客氣,記得幫我多分享!
没问题的!