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

最後更新日期：2019 年 11 月 22 日

本篇文章教你在 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，符合自己想要的寬度。