內容更新於 — 2023-06-17 21:52
以前只有傳統編輯器〔Classic Editor〕的年代,嵌入YouTube影片往往都會有影片寬度與螢幕不合的問題!比如說,調整好在電腦顯示的影片寬度,但是到了手機一定會超出螢幕範圍,這是因為YouTube預設的嵌入〔iframe〕語法沒有〔響應式〕的樣式設定,所以造成非常糟糕的用戶體驗!可能還需要自己在主題編寫響應式的css給影片使用,或者是額外安裝外掛!但是到了Gutenberg或區塊編輯器就完全不一樣了,不需要裝什麼外掛,就可以在Gutenberg或區塊編輯器嵌入響應式的YouTube影片,而且,非常簡單快速,沒有什麼比直接貼上網址還要更快速的方法了!
Gutenberg或區塊編輯器內建的〔嵌入〕功能,目前支援的URL格式多達數十種,最常嵌入的就是Vimeo與YouTube影片、facebook、instagram、Twitter的貼文、imgur圖片…等等。
在Gutenberg或區塊編輯器的可用物件中,有一個叫做〔Embeds〕的區塊,展開之後就會出現可支援的URL類型,撰寫這篇文章的時候,已經有36種可自動嵌入的URL類型。
比如說,如果要嵌入YouTube影片,就選擇〔YouTube區塊〕,接著貼上YouTube影片的網址,再點擊〔Embed〕按鈕,就會自動嵌入響應式的YouTube影片。
但是,這樣還不夠快,因為現在更智能了!
不需要選擇相對應的區塊,只需要在〔Paragraph〕區塊中貼上網址,就能自動偵測URL的類型,更快速地嵌入響應式的媒體。
現在的Gutenberg外掛與內建的區塊編輯器,不需要再找到相應的區塊,只要是〔Embed〕區塊所支援的數十種URL,都可以直接在〔Paragraph〕區塊貼上網址,它會自動偵測並且嵌入響應式的媒體,而且嵌入的速度比手動選擇對應區塊再點擊〔Embed〕按鈕還要更快唷。
Gutenberg外掛與內建的區塊編輯器,可以自動偵測數十種第三方媒體的URL,但是我們必須找對網址才能順利嵌入,否則,就會出現【Sorry, this content could not be embedded.】失敗訊息…
操作時間
雖然說平常是習慣從影片下方的〔分享〕按鈕中複製影片的〔短網址〕,〔短網址〕通常會長這樣☞https://youtu.be/2AEqHyMliew
但是WordPress文檔中的說明:複製觀看影片時,上方網址列裡面帶有〔www.youtube.com〕網址,也就是實際的影片網址,通常會長這樣☞https://www.youtube.com/watch?v=2AEqHyMliew
雖然〔短網址〕與YouTube實際網址的尾巴都是〔2AEqHyMliew〕,但是在我的經驗中,嵌入YouTube實際網址比較不會發生嵌入失敗的問題。
–
請注意
❶只有【公開】以及【不公開】的影片能夠被嵌入,【私人】影片無法嵌入唷~
❝如果不想要影片出現在YouTube頻道的播放列表公開,但是又想要在網站上嵌入,那就將影片設為【不公開】就可以囉❞
–
❷IPhone版的YouTube網址取得也是一樣,按〔分享〕按鈕之後,盡量不要直接點擊〔複製連結〕,而是要先選擇〔顯示更多內容〕之後,再點擊〔拷貝〕,這樣取得的網址才會是YouTube實際網址唷~
vimeo就相對較單純了,無論從哪裏複製,都只有一種網址型態,不會額外產生短網址。
如果已經在觀看影片的頁面中,就直接複製上方網址列的網址就可以了;如果在自己的帳戶後台中,也可以在影片列表中,點擊影片下方的〔連結〕小圖示,再點擊〔Copy video link〕,就可以直接複製了。
IPhone版的vimeo也能取得影片網址☞點擊影片右上方的〔分享〕按鈕,再選擇〔Copy URL〕就直接複製網址囉~
電腦版的twitter和臉書一樣,都是以〔發布時間〕作為推文的專屬網址,複製的步驟比照臉書即可。
–
IPhone版的twitter也可以取得推文的網址,一樣是點擊貼文的〔分享〕按鈕,再選擇〔複製推文的連結〕就可以囉!
注意事項:公開的推文才能被嵌入唷~
flickr是裡面最容易的,電腦版與IPhone版的操作一樣。
只需要點擊圖片右下方的〔分享〕按鈕,就可以直接複製網址囉~
除此之外,flickr的嵌入樣式很不一樣,它只會顯示嵌入的那張圖片,完全沒有任何用戶訊息,也不會出現flickr的logo,就是很單純且乾淨的圖片,非常適合當作圖床使用。
搭配Gutenberg外掛與區塊編輯器,直接在〔Paragraph〕貼上網址就能嵌入的功能,相當方便!
電腦版與Iphone版的操作方式都一樣,點擊〔專輯〕與〔歌曲〕旁邊的〔•••〕,滑鼠滑到或選擇〔分享〕,最後再點選〔複製多個專輯連結〕或〔複製多個歌曲連結〕就可以了。
注意事項:在Spotify中,〔專輯〕與〔歌曲〕都可以被嵌入,但是〔播放清單〕就不行了哦!
雖然說Gutenberg/區塊編輯器的自動嵌入響應式媒體的功能真的很讚,但是偶爾還是會小鬧一下脾氣…(我在半年內遇過二次偶發性的嵌入失敗)
當貼上網址之後出現圖片中的提示訊息☞【Sorry, this content could not be embedded.】
請先檢查是否是因為嵌入的內容不完全公開,或者是網址有誤…等等的人為因素。
比如說facebook的社團貼文、貼文的分享對象僅限朋友;或者是Spotify的播放清單;又或是有些不公開搜尋的Instagram好友的貼文…等等,這些的確無法被嵌入唷~
YouTube的影片網址盡量使用帶有【youtube.com】的實際網址。
在我的使用經驗中,極少會發生嵌入失敗或失效的情形,雖然偶爾還是會有意外發生。
倘若已經確認影片或貼文本身以及網址都沒問題,還是無法正常嵌入,那就回到最原始的〔iframe〕語法嵌入吧!
如果要使用〔iframe〕語法嵌入,千萬不要傻傻地將YouTube或其他媒體所提供的〔內嵌〕或〔嵌入〕語法唷。
因為這些〔內嵌〕或〔嵌入〕語法並沒有加入〔移動設備響應式〕CSS樣式,這樣會造成媒體在手機呈現的尺寸超過螢幕範圍!
我撰寫了另外一篇文章,提供了四種〔移動設備響應式〕的嵌入方式。
如果不得已要仰仗〔iframe〕語法嵌入的時候,建議使用〔移動設備響應式〕的嵌入語法唷~
★延伸閱讀☞Gutenberg/區塊編輯器無法嵌入Youtube的免外掛響應式替代方案
使用〔移動設備響應式〕的〔iframe〕嵌入代碼,除了可以解決Gutenberg或區塊編輯器偶發性的故障問題之外,它還有個更高端的功能☞設定影片【自動播放】以及【循環播放】。
也就是說,每當影片暫停、或者是播放結束之後,YouTube都會停在推播其他用戶影片的畫面,但是只要設定循環播放,它就會不斷播放我們嵌入的那支影片,即使按了暫停播放,也只會出現同一個YouTube帳戶裡的其他影片,再也不會出現其他YouTube帳戶的影片囉~
★延伸閱讀☞讓你的YouTube影片循環播放吧!
使用Gutenberg與區塊編輯器的 〔Paragraph〕區塊自動嵌入數十種媒體的方式 就介紹到這裡了! 如果有任何問題, 歡迎在下方的留言板討論指教囉!
Copyright ©miriammibao.com all rights reserved|Designed by MiriamMibao温唯 Since 2014.