Gutenberg教學｜免外掛!4種語法嵌入響應式/循環/自動播放 ...

4招免外掛嵌入響應式YouTube影片 使用條款免責聲明CONTACTBLOGABOUTHOME SkinCare｜美妝傲客 防曬｜Sunscreen 護膚日記 產品糾察隊｜Products 保養品成分｜Ingredients 問題肌保養｜SkinProblems Style｜Photography 日常研究院 ADOBE自學筆記 唯電影｜陪你看電影｜Movies WordPress架站筆記 虛擬主機｜WebHosting CLOUDWAYS教學 OXYGENLaboratory WordPress筆記 佈景主題｜Theme WordPress外掛｜Plugin 黑色購物節/主機/外掛/主題推薦清單 謝謝你的咖啡❤ Ｘ 搜尋關鍵字: Ｘ 搜尋關鍵字: Gutenberg教學｜免外掛!4種語法嵌入響應式/循環/自動播放Youtube影片文章分類：WordPress筆記,BlogArticles,WordPress新手架站｜發布於：2020-05-15❝廣告，是為了讓這裡能夠永續經營，多多包容囉＾v＾❞ Lastupdatedat—2021-04-0701:18 我原本很喜歡使用區塊編輯器來嵌入YouTube影片，因為只需要在〔Paragraph〕貼上網址，它就會自動偵測URL類型，嵌入〔響應式〕的YouTube影片；而這個〔響應式〕的影片會按照不同設備的螢幕大小自動顯示最合適的影片寬度，不用擔心影片會超出手機螢幕。

但是，它偶爾會鬧脾氣，莫名其妙就無法嵌入！而且之前成功嵌入的影片也會失效，變成一串無法點擊的YouTube影片網址……。

雖然還不清楚是什麼樣的原因造成的，但是在我的經驗中，WordPressv.5.4與v5.4.1都偶發過一次，貼上網址後會出現如下圖這樣的畫面，下方會有一串說明為Sorry,thiscontentcouldnotbeembedded. 雖然說Gutenberg外掛或區塊編輯器非常方便，無腦貼上即可，不用麻煩地取得〔iframe〕語法，也不用煩惱還要將預設的〔iframe〕語法修改成〔響應式〕的代碼。

如果你的區塊編輯器總是溫順可人，就用力享受它的強大吧～ ★延伸閱讀☞Gutenberg/區塊編輯器教學｜貼上網址就能自動嵌入36種響應式媒體 倘若當區塊編輯器正好又鬧脾氣的時候，要嘛安裝YouTube外掛，如果和我一樣，不想為了這點小事又多裝外掛，只好重回〔iframe〕語法的懷抱囉～ 4招免外掛嵌入響應式YouTube影片 以往在傳統編輯器〔ClassicEditor〕的年代，嵌入YouTube影片往往都會有影片大小與螢幕不合的問題！比如說，調整好在電腦顯示的影片尺寸之後，到了手機一定會超過螢幕範圍，這是因為YouTube預設的嵌入語法，缺少〔響應式〕的CSS樣式，才會造成非常糟糕的用戶體驗！ 以下是YouTube預設的嵌入語法範例，因為傳統編輯器插入影片也是擷取這組語法，寬度與高度必須被固定，所以無法在不同設備中自動縮放比例： 為了打造〔響應式〕的嵌入語法，首要工作就是，丟掉YouTube〔分享〕按鈕所提供的〔嵌入〕代碼，準備好YouTube的【影片ID】。

我們要設計一組〔響應式〕的嵌入語法，再將YouTube的【影片ID】放入語法中。

這組〔響應式〕的嵌入語法在區塊編輯器以及傳統編輯器〔ClassicEditor〕都可以使用，同時解決傳統編輯器插入影片無法自動縮放合適尺寸的糟糕體驗！ 以下介紹4種不同樣式的〔響應式〕YouTube影片語法： ❝廣告，是為了讓這裡能夠永續經營，多多包容囉＾v＾❞ ❶無腦快速嵌入法 這種方式在區塊編輯器中的〔Shortcode〕直接貼上語法最快速！ 先把網址貼在〔響應式YouTube影片產生器〕的YouTubePageURL欄位中 讓它幫我們產生〔響應式〕的CSS合併HTML代碼 再將這段代碼複製貼回區塊編輯器的〔Shortcode〕中 收工～ 下面影片是快速操作方式： 如果習慣使用傳統編輯器〔ClassicEditor〕，也可參考優雅筆寄的操作教學。

❷自訂CSS，讓它更完美吧！ 〔響應式YouTube影片產生器〕幫我們生成的CSS合併HTML語法，可以嵌入讓不同設備寬度都能適合的影片；不過，它的語法其實還有可以改進的空間… 示範的YouTube影片網址如下： https://www.youtube.com/watch?v=2AEqHyMliew 影片網址尾巴的2AEqHyMliew，是每個影片都有的專屬ID；在下面的代碼中，要將2AEqHyMliew改成自己的【影片ID】。

〔響應式YouTube影片產生器〕生成的響應式語法如下： 別忘了將2AEqHyMliew改成你自己的【影片ID】 在上面這段語法中，要修改的是☞刪除frameborder=‘0’ 刪除frameborder，並且在CSS中加入border:0none; 以往控制是否要顯示邊框，通常會使用【frameborder】屬性來定義；但是因為HTML5已不支援【frameborder】，所以會建議刪除上面語法中的frameborder='0'。

修改後的的代碼如下，別忘了將2AEqHyMliew改成你自己的【影片ID】： 修改前後的差異在於：【影片ID】2AEqHyMliew的後面直接接上'allowfullscreen 如果想要去掉邊框，可以在CSS中加入border:0none; 將border:0none;放進這一段CSS代碼{position:absolute;top:0;left:0;width:100%;height:100%;}，可放在height:100%;的後面。

放進去之後的代碼如下，height:100%;的後面多了border:0none;： 以上代碼可以直接複製使用，別忘了將2AEqHyMliew改成你自己的【影片ID】 ❸自訂可循環播放的語法 既然都已經修改了代碼，我們還可以擁有更多的追求，比如說：想要影片可以〔循環播放〕！ 循環播放有什麼好處? 我們總是希望訪客只專注在自己的影片與網站內容，但是YouTube的預設是每當影片暫停播放、或者是結束播放，都會出現其他YouTube用戶的推薦影片，這樣可能會讓訪客前往觀看別人的影片，而忽略了我們的文章內容，甚至是離開網站...但是呢，只要加入循環播放的語法，它就會不斷播放我們嵌入的那支影片；除此之外，即使訪客按了暫停播放，自動彈出的〔更多影片〕，也只會出現我們自己YouTube帳戶裡的其他影片，再也不會出現其他帳戶的影片囉～ 一樣拿前面修改過後的語法當修改範例： 手動加入循環播放語法 從上方的代碼中找到【影片ID】，示範的【影片ID】為2AEqHyMliew，接著在2AEqHyMliew與後面接著的allowfullscreen>之間，要插入〔循環播放〕的語法：?rel=0&hd=1&autoplay=1&loop=1&playlist=2AEqHyMliew 插入之後就會變成下面這樣： 點這裡看影片實際嵌入效果 為了要達到〔循環播放〕的目的，語法中的尾巴也有一組【影片ID】，所以整段語法中，【影片ID】一共會出現2次。

如果你沒把握自己添加的話，也可以直接複製上面那段加入〔循環播放〕的響應式嵌入代碼。

請注意，上面語法中一共有2個2AEqHyMlie，這2個都要改成你自己的【影片ID】哦。

❹加入可自動播放的語法 除了〔循環播放〕之外，有的人可能會想要〔自動播放〕的功能，方便訪客不用再點擊〔播放鍵〕，又或者是希望能夠留住訪客的目光…以下的做法是基於前面的〔循環播放〕語法，再加入〔自動播放〕的屬性autoplay=1 請注意：自動播放的屬性只對電腦瀏覽有效，手機瀏覽無法自動播放唷～ 加入之後的語法如下： 點這裡看影片嵌入效果比較 和〔循環播放〕的代碼一樣，裡面一共有2個2AEqHyMliew，這2個都要改成你自己的影片ID。

以上自訂的這些播放屬性，都來自於YouTube的文檔，還有許多其他的功能，有興趣的人可以自己玩玩看，其實蠻有趣的☞YouTube嵌入影片可用屬性 以上四種嵌入語法，點這裡可以看實際嵌入效果。

❝廣告，是為了讓這裡能夠永續經營，多多包容囉＾v＾❞ 將CSS放在主題中精簡語法 前面示範的四種嵌入方法其實也非常容易了，只要整塊複製之後，在區塊編輯器的〔Shortcode〕、或者是傳統編輯器〔純文字編輯〕貼上，最後再將2AEqHyMliew修改成自己的【影片ID】就完事了！ 但是當網站或者是文章中有許多影片的時候，是可以考慮將這些需要重複使用的CSS語法放到主題的CSS裡面，如此可以讓頁面中的程式碼更輕巧也更乾淨，網頁開啟的速度也會相對更快。

拆解語法中的CSS與HTML 其實前面示範的四種嵌入語法，屬於CSS合併HTML的語法。

因為我們需要將嵌入媒體的樣式定義為〔響應式〕，所以需要使用CSS來定義樣式；但是又需要將語法以HTML的型態放在文章中使用，所以就需要在CSS語法的前後使用