【WordPress教學】如何嵌入響應式 YouTube 影片？利用程式碼片段！

本篇文章教你在 WordPress 的文章中插入 YouTube 影片時，也可以有響應式 (Responsive) 的效果，也就是影片尺寸會跟隨著螢幕尺寸自動調整。

透過程式碼片段 (Code Snippets) 外掛，可以輕鬆製作出一個簡單的短代碼 (Shortcode)，讓你的影片尺寸永遠不會跑版！

【WordPress教學】如何嵌入響應式 YouTube 影片？利用程式碼片段！

YouTube 影片沒有響應式的情形

目前主要是發現在傳統編輯器嵌入 YouTube 影片，會發現手機的影片特別長，個人認為響應式做的不太好。

下面有兩張圖，分別是傳統編輯器影片比例、古騰堡編輯器影片比例，可以看得出在傳統編輯器的比例不太好。

如果是用古騰堡編輯器的人，恭喜你，不需要看這篇文章。

如果是用傳統編輯器的人，建議你也可以考慮換成古騰堡編輯器，畢竟是官方預設的編輯器，但是我知道轉換編輯器需要滿大的時間+修改，所以就繼續看下去吧！

透過外掛解決

其實可以很簡單的透過 Embed Plus for YouTube 這款外掛來解決，只要勾選設定的 Responsive all videos 就可以完成。

但是畢竟外掛能省就省，而且這款外掛還有其他功能，可能會用不到，造成浪費的情況。

所以還是繼續看下去吧！

程式碼片段是什麼？

程式碼片段 Code Snippets 是一款可以增加程式碼在網站中的外掛，最大的好處就是很好管理，而且不受佈景主題更換而影響。

詳細內容可以查看之前的教學：

【WordPress教學】如何自訂WordPress語法？6個程式碼片段範例教學

利用程式碼片段嵌入響應式 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主軟體開始到連結、媒體、選單、圖像、展示區、管理、用家建檔等等。甚至還有教你如何開發主題、外掛、小工具，從入門到進階的教學都很完整。

WordPress Plugins百大外掛精選(火力加強版)

書籍介紹

這本書教你從基礎架站、備份保存到各式各樣的外掛主題，讓你想裝什麼就裝什麼，建置專屬自己獨一無二的多功能發佈平台。作者特別精選了各類型的外掛做介紹，只要你想的到的功能幾乎都在裡面，匯集了讀者們一直喜愛的外掛程式介紹，並且添加了最新的外掛程式，更貼近現在的讀者需求。

=> 查看 WordPress 必裝主題與外掛推薦、學習管道、最新優惠統整！

=> 查看我是如何透過 WordPress 架設部落格，賺取每個月的被動收入！

=> 查看 WordPress 黑色星期五大折扣！

如果對文章內容有任何問題，歡迎在底下留言讓我知道。

如果你喜歡我的文章，可以按分享按鈕，讓更多的人看見我的文章。

還沒訂閱部落格的朋友們，記得在下方填入信箱，收到我最新文章的通知。

歡迎按讚我的粉絲專頁，會有最新文章、程式語言課程、WordPress主題外掛優惠的訊息。

追蹤我的Instagram，最近有一系列的#不務正業工程師、#工程師之路！

阿璋也陸續開始拍攝影片，訂閱我的 Youtube 頻道，並開啟小鈴鐺～

如果這篇文章對你有幫助，可以幫我在下方按 5 個Like，讓我得到一些回饋，支持我繼續寫出更多好文章！

阿璋有創立一個社團，歡迎加入！
WordPress / 部落格經營 / 網路行銷 | Johntool-工具王阿璋

本站有部分連結與商家有合作關係，透過我的連結購買，我會獲得少數佣金，讓我可以持續營運網站，但並不會影響您的任何權益，詳情查看免責聲明。

by Johntool-工具王阿璋