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 線上課程,如果有興趣的人,歡迎點擊下方連結。

WP 全方位架站攻略

從 0 開始建立部落格

站長之路手把手教你如何透過部落格開始賺錢,內容包含 WordPress、部落格經營、網路行銷,帶你成為一個成功的部落格站長!

查看站長之路

WordPress 架站推薦

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

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

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

學習更多:查看我是如何透過 WordPress 架設部落格,賺取人生第一桶金!



WordPress 學習書籍推薦

WordPress 無敵架站手冊:架站新手都想擁有:教你打造個人專屬網站

WordPress 無敵架站手冊
WordPress 無敵架站手冊

書籍介紹

這本書教你從零開始建立起一個全功能的WordPress網站,從下載與安裝WordPress主軟體開始到連結、媒體、選單、圖像、展示區、管理、用家建檔等等。 甚至還有教你如何開發主題、外掛、小工具,從入門到進階的教學都很完整。

推薦原因

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

購買 WordPress 無敵架站手冊

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

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

書籍介紹

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

推薦原因

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

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

我正在籌備 WordPress 線上課程,有興趣的歡迎先加入等候名單,獲得第一手優惠資訊:WP 全方位架站攻略

12篇文章手把手教你如何透過部落格開始賺錢:站長之路

我靠聯盟行銷賺進人生第一桶金:聯盟行銷是什麼? 我靠聯盟行銷 11 個月賺進百萬

透過 YouTube 建立年收百萬的品牌:【YouTube 賺錢】百萬品牌網路事業訓練課程評價 | Yale Chen 是誰?

輕鬆投資美股的方式:【美股 ETF】爽賺 45 K? Yale Chen 美股課程評價

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

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

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

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

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

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

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


加入我的 Telegram 頻道,最新的資訊會透過 Telegram 來公告!

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

如果我的文章對你有幫助,歡迎贊助我一杯咖啡!

贊助我一杯咖啡

文章引用請來信索取授權,否則將保留法律追訴權。

by Johntool-工具王阿璋

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

  1. 不知道版主有沒有遇到這個問題,我貼上影片網址時,有時候可以正常出現影片,有時候瀏覽文章又變成單純的網址,請問這要怎麼解決呢?

發表迴響

Scroll to Top