本篇文章教你在 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 無敵架站手冊:架站新手都想擁有:教你打造個人專屬網站

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

書籍介紹
這本書教你從基礎架站、備份保存到各式各樣的外掛主題,讓你想裝什麼就裝什麼,建置專屬自己獨一無二的多功能發佈平台。 作者特別精選了各類型的外掛做介紹,只要你想的到的功能幾乎都在裡面,匯集了讀者們一直喜愛的外掛程式介紹,並且添加了最新的外掛程式,更貼近現在的讀者需求。推薦原因
這本書作者是免費資源網路社群的作者 Pseric,他的網站知名度非常的高,也是透過 WordPress 架設而成,因此對於外掛的理解,絕對是數一數二。購買 WordPress Plugins 百大外掛精選(火力加強版)
WordPress 架站推薦
新手架站:【架站教學】專門為WordPress打造的主機?WPWebHost 完整教學!高流量網站:【架站教學】新手快速架站教學,使用Cloudways架設WordPress網站!
=> 查看 WordPress 必裝主題與外掛推薦、學習管道、最新優惠統整!
=> 查看我是如何透過 WordPress 架設部落格,賺取每個月的被動收入!
=> 查看 WordPress 黑色星期五大折扣!
如果對文章內容有任何問題,歡迎在底下留言讓我知道。
如果你喜歡我的文章,可以按分享按鈕,讓更多的人看見我的文章。
還沒訂閱部落格的朋友們,記得在下方填入信箱,收到我最新文章的通知。
歡迎按讚我的粉絲專頁,會有最新文章、程式語言課程、WordPress主題外掛優惠的訊息。
追蹤我的Instagram,最近有一系列的#不務正業工程師、#工程師之路!
阿璋也陸續開始拍攝影片,訂閱我的 Youtube 頻道,並開啟小鈴鐺~
如果這篇文章對你有幫助,可以幫我在下方按 5 個Like,讓我得到一些回饋,支持我繼續寫出更多好文章!
阿璋有創立一個社團,歡迎加入!
WordPress / 部落格經營 / 網路行銷 | Johntool-工具王阿璋
本站有部分連結與商家有合作關係,透過我的連結購買,我會獲得少數佣金,讓我可以持續營運網站,但並不會影響您的任何權益,詳情查看免責聲明。
by Johntool-工具王阿璋
很棒的内容,学习到了……
不客氣,記得幫我多分享!
没问题的!