贊助商連結

以前只有傳統編輯器〔Classic Editor〕的年代,嵌入YouTube影片往往都會有影片寬度與螢幕不合的問題!比如說,調整好在電腦顯示的影片寬度,但是到了手機一定會超出螢幕範圍,這是因為YouTube預設的嵌入〔iframe〕語法沒有〔響應式〕的樣式設定,所以造成非常糟糕的用戶體驗!可能還需要自己在主題編寫響應式的css給影片使用,或者是額外安裝外掛!但是到了Gutenberg或區塊編輯器就完全不一樣了,不需要裝什麼外掛,就可以在Gutenberg或區塊編輯器嵌入響應式的YouTube影片,而且,非常簡單快速,沒有什麼比直接貼上網址還要更快速的方法了!

Gutenberg/區塊編輯器-貼上網址就能自動嵌入

Gutenberg或區塊編輯器內建的〔嵌入〕功能,目前支援的URL格式多達數十種,最常嵌入的就是Vimeo與YouTube影片、facebook、instagram、Twitter的貼文、imgur圖片…等等。
在Gutenberg或區塊編輯器的可用物件中,有一個叫做〔Embeds〕的區塊,展開之後就會出現可支援的URL類型,撰寫這篇文章的時候,已經有36種可自動嵌入的URL類型。

可自動嵌入Gutenberg與區塊編輯器的媒體-1080px最高mbps

比如說,如果要嵌入YouTube影片,就選擇〔YouTube區塊〕,接著貼上YouTube影片的網址,再點擊〔Embed〕按鈕,就會自動嵌入響應式的YouTube影片。

Gutenberg-區塊編輯器embed-logo

但是,這樣還不夠快,因為現在更智能了!
不需要選擇相對應的區塊,只需要在〔Paragraph〕區塊中貼上網址,就能自動偵測URL的類型,更快速地嵌入響應式的媒體。

只要在Paragraph貼上網址就能自動偵測嵌入

現在的Gutenberg外掛與內建的區塊編輯器,不需要再找到相應的區塊,只要是〔Embed〕區塊所支援的數十種URL,都可以直接在〔Paragraph〕區塊貼上網址,它會自動偵測並且嵌入響應式的媒體,而且嵌入的速度比手動選擇對應區塊再點擊〔Embed〕按鈕還要更快唷~

使用〔Paragraph〕自動嵌入的優勢

  • 在〔Paragraph〕就可直接嵌入,省去手動找到相對應物件的手續與時間。
  • 嵌入的速度飛快貼上網址就能自動嵌入並且顯示,不需要使用〔iframe〕語法。
  • 會自動轉換成響應式,不需要寫css就能解決手機顯示超出範圍的問題。

如何找到嵌入媒體的URL?

36-media-url

Gutenberg外掛與內建的區塊編輯器,可以自動偵測數十種第三方媒體的URL,但是我們必須找對網址才能順利嵌入,否則,就會出現【Sorry, this content could not be embedded.】失敗訊息…

操作時間

YouTube

URL-YouTube

雖然說平常是習慣從影片下方的〔分享〕按鈕中複製影片的〔短網址〕,〔短網址〕通常會長這樣☞https://youtu.be/2AEqHyMliew
但是WordPress文檔中的說明:複製觀看影片時,上方網址列裡面帶有〔www.youtube.com〕網址,也就是實際的影片網址,通常會長這樣☞https://www.youtube.com/watch?v=2AEqHyMliew
雖然〔短網址〕與YouTube實際網址的尾巴都是〔2AEqHyMliew〕,但是在我的經驗中,嵌入YouTube實際網址比較不會發生嵌入失敗的問題。

請注意
❶只有【公開】以及【不公開】的影片能夠被嵌入,【私人】影片無法嵌入唷~
如果不想要影片出現在YouTube頻道的播放列表公開,但是又想要在網站上嵌入,那就將影片設為【不公開】就可以囉

❷IPhone版的YouTube網址取得也是一樣,按〔分享〕按鈕之後,盡量不要直接點擊〔複製連結〕,而是要先選擇〔顯示更多內容〕之後,再點擊〔拷貝〕,這樣取得的網址才會是YouTube實際網址唷~

vimeo

URL-vimeo

vimeo就相對較單純了,無論從哪裏複製,都只有一種網址型態,不會額外產生短網址。
如果已經在觀看影片的頁面中,就直接複製上方網址列的網址就可以了;如果在自己的帳戶後台中,也可以在影片列表中,點擊影片下方的〔連結〕小圖示,再點擊〔Copy video link〕,就可以直接複製了。
IPhone版的vimeo也能取得影片網址☞點擊影片右上方的〔分享〕按鈕,再選擇〔Copy URL〕就直接複製網址囉~

facebook

URL-facebook

臉書的每一則貼文都有自己的專屬網址,這個專屬網址就是貼文的〔發布時間〕,點進去之後就會進入到貼文的專屬頁面,接著就可以複製貼文專屬頁面上方網址列的網址。
還有更快的方法,不用點擊貼文的〔發布時間〕進入專屬頁面,只需要將滑鼠放在〔發布時間〕上按〔右鍵〕選擇【複製連結網址】,就可以直接複製貼文的專屬頁面網址囉~

IPhone版的facebook也可以取得臉書貼文的專屬網址,但是和電腦版的方式就完全不一樣了!
首先,點擊貼文的〔分享〕按鈕,選擇〔更多選項〕,再點擊〔拷貝〕,就能取得貼文的專屬網址囉~

注意事項:
❶社團的貼文無法被嵌入,即使是公開社團的貼文也無法。
❷個人帳號必須是公開貼文才可以被嵌入。
❸粉絲專頁的貼文應該都是公開的,所以當然都可以嵌入
❹嵌入之後不會像其他的媒體那樣能在編輯頁面直接預覽,只會出現〔貼文網址〕,下面也會多一句提醒【Embedded content from facebook.com can’t be previewed in the editor.】,這是告訴我們臉書嵌入的內容無法在編輯頁面下預覽,但是大家不用擔心,前台都能正常顯示唷~

twitter

URL-twitter

電腦版的twitter和臉書一樣,都是以〔發布時間〕作為推文的專屬網址,複製的步驟比照臉書即可。

IPhone版的twitter也可以取得推文的網址,一樣是點擊貼文的〔分享〕按鈕,再選擇〔複製推文的連結〕就可以囉!
注意事項:公開的推文才能被嵌入唷~

Instagram

URL-Instagram

比起facebook與twitter,Instagram就相對更容易了。
只需要打開電腦版的Instagram個人首頁,點開要嵌入的那則貼文,上方網址列的網址就是那則貼文的專屬網址。

IPhone版的Instagram則是點擊貼文右上方的〔•••〕,接著再點擊〔複製連結〕就可以嚕~

注意事項:只有可公開搜尋的Instagram的帳號貼文才能被嵌入唷~

Spotify

URL-spotify

電腦版與Iphone版的操作方式都一樣,點擊〔專輯〕與〔歌曲〕旁邊的〔•••〕,滑鼠滑到或選擇〔分享〕,最後再點選〔複製多個專輯連結〕或〔複製多個歌曲連結〕就可以了。

注意事項:在Spotify中,〔專輯〕與〔歌曲〕都可以被嵌入,但是〔播放清單〕就不行了哦~

flickr

URL-flickr

flickr是裡面最容易的,電腦版與IPhone版的操作一樣。
只需要點擊圖片右下方的〔分享〕按鈕,就可以直接複製網址囉~
除此之外,flickr的嵌入樣式很不一樣,它只會顯示嵌入的那張圖片,完全沒有任何用戶訊息,也不會出現flickr的logo,就是很單純且乾淨的圖片,非常適合當作圖床使用。
搭配Gutenberg外掛與區塊編輯器,直接在〔Paragraph〕貼上網址就能嵌入的功能,相當方便!

嵌入失敗怎麼辦?

雖然說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〕區塊自動嵌入數十種媒體的方式
就介紹到這裡了!
如果有任何問題, 歡迎在下方的留言板討論指教囉~

好嘛好嘛…臨走前幫我拍拍手嘛
如果你願意免費幫助我,請在下方圓形按鈕幫我拍拍手,最多可以按5下,那就幫我按5下吧!算我求你啦啦啦~~~謝謝你、我愛你❤
臉書或Google帳號都可以快速登入喲…

facebook留言板|文章相關問題歡迎留言討論唷~
IMG_2349-miriammibao-100px

▍關於作者|MiriamMibao温唯

2019.02.11,我開始了這裡…
不懂css、不懂php,當然-也不知道誰是Nginx、誰又是Apache…
硬要WordPress架站,一切自己來,所有的細節,從0開始,自己架站會遇到的問題,遇到了才知道!這一路走來,跌跌撞撞,摸索過國內外能夠解決問題的資料…
是不是該好好紀錄這一段跌跌撞撞的探索日記?或許,也能帶給你們一些幫助...

咖啡贊助計畫

buy me a coffee-icon

我願意《將我所知道的一切,仔細地、真實地分享給你》
你願意《請我喝咖啡》嗎?
你的一杯咖啡,是我最溫暖的支持❤
用實際行動支持我創作更多好作品吧