fbpx
首頁 » WordPress » WordPress 程式碼 » 【WordPress教學】如何嵌入響應式 YouTube 影片? 利用程式碼片段!

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

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

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

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

YouTube 影片沒有響應式的情形

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

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

傳統編輯器影片比例
傳統編輯器影片比例
古騰堡編輯器影片比例
古騰堡編輯器影片比例

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

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

 

透過外掛解決

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

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

所以還是繼續看下去吧!

Embed Plus for YouTube
Embed Plus for YouTube

 

程式碼片段是什麼?

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

程式碼片段 Code Snippets
程式碼片段 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 的效果了!

響應式 YouTube 影片
響應式 YouTube 影片

 

補充小說明

這段程式碼適用於一般有側邊欄的文章頁面,如果是全寬的頁面,可能會造成影片尺寸過大。

大家基本上使用上面那段就夠了,這裡是給特殊需求的人使用!

這時候只要改成用以下程式碼就可以解決:

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網站,從下載與安裝WordPress主軟體開始到連結、媒體、選單、圖像、展示區、管理、用家建檔等等。 甚至還有教你如何開發主題、外掛、小工具,從入門到進階的教學都很完整。

推薦原因

這本書原作者是波蘭人,原文是英文,後來經由免費資源網路社群的作者 Pseric 翻譯成中文書。 WordPress 目前的中文書可說是少之又少,這本不僅是中文書,內容又非常完整,絕對是學習WordPress的首選書籍!

購買 WordPress 無敵架站手冊

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

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

書籍介紹

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

推薦原因

這本書作者是免費資源網路社群的作者 Pseric,他的網站知名度非常的高,也是透過 WordPress 架設而成,因此對於外掛的理解,絕對是數一數二。

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


WordPress 架站推薦

新手架站:【架站教學】專門為WordPress打造的主機?WPWebHost 完整教學!

高流量網站:【架站教學】新手快速架站教學,使用Cloudways架設WordPress網站!

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


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


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



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

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

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

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

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

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

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

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


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

by Johntool-工具王阿璋

訂閱我的文章

如果喜歡我的文章,可以留下信箱,每發佈新文章時,就會準時通知您!

3 thoughts on “【WordPress教學】如何嵌入響應式 YouTube 影片? 利用程式碼片段!”

發表迴響

Scroll Top