區塊編輯器教學|貼上網址自動嵌入36種響應式媒體

內容更新於 — 2023-06-17 21:52

❝廣告,是為了讓這裡能夠永續經營,多多包容囉^v^❞

以前只有傳統編輯器〔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〕就直接複製網址囉~

twitter

URL-twitter

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

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

flickr

URL-flickr

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

Spotify

URL-spotify-1 URL-spotify-2
⇦左右滾動看其他圖片⇨

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

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

嵌入失敗怎麼辦?

雖然說Gutenberg/區塊編輯器的自動嵌入響應式媒體的功能真的很讚,但是偶爾還是會小鬧一下脾氣…(我在半年內遇過二次偶發性的嵌入失敗)
當貼上網址之後出現圖片中的提示訊息☞【Sorry, this content could not be embedded.】

先檢查內容與網址是否有誤或者不支援

請先檢查是否是因為嵌入的內容不完全公開,或者是網址有誤…等等的人為因素。
比如說facebook的社團貼文、貼文的分享對象僅限朋友;或者是Spotify的播放清單;又或是有些不公開搜尋的Instagram好友的貼文…等等,這些的確無法被嵌入唷~
YouTube的影片網址盡量使用帶有【youtube.com】的實際網址。

❝廣告,是為了讓這裡能夠永續經營,多多包容囉^v^❞

其他更多功能的嵌入方式

在我的使用經驗中,極少會發生嵌入失敗或失效的情形,雖然偶爾還是會有意外發生。
倘若已經確認影片或貼文本身以及網址都沒問題,還是無法正常嵌入,那就回到最原始的〔iframe〕語法嵌入吧!

如果要使用〔iframe〕語法嵌入,千萬不要傻傻地將YouTube或其他媒體所提供的〔內嵌〕或〔嵌入〕語法唷。
因為這些〔內嵌〕或〔嵌入〕語法並沒有加入〔移動設備響應式〕CSS樣式,這樣會造成媒體在手機呈現的尺寸超過螢幕範圍!

我撰寫了另外一篇文章,提供了四種〔移動設備響應式〕的嵌入方式。
如果不得已要仰仗〔iframe〕語法嵌入的時候,建議使用〔移動設備響應式〕的嵌入語法唷~

★延伸閱讀☞Gutenberg/區塊編輯器無法嵌入Youtube的免外掛響應式替代方案

循環播放讓訪客只看你的影片

使用〔移動設備響應式〕的〔iframe〕嵌入代碼,除了可以解決Gutenberg或區塊編輯器偶發性的故障問題之外,它還有個更高端的功能☞設定影片【自動播放】以及【循環播放】。
也就是說,每當影片暫停、或者是播放結束之後,YouTube都會停在推播其他用戶影片的畫面,但是只要設定循環播放,它就會不斷播放我們嵌入的那支影片,即使按了暫停播放,也只會出現同一個YouTube帳戶裡的其他影片,再也不會出現其他YouTube帳戶的影片囉~

★延伸閱讀☞讓你的YouTube影片循環播放吧!

使用Gutenberg與區塊編輯器的 〔Paragraph〕區塊自動嵌入數十種媒體的方式 就介紹到這裡了! 如果有任何問題, 歡迎在下方的留言板討論指教囉!

贊助温唯
如果 你想要感謝我、願意支持我
那麼–
就請我喝杯咖啡,聊表心意吧(愛心)
我將繼續無私分享你想看的內容
解答你的疑難雜症
原始發布日:
2020-05-16
最新留言
▍關於作者|MiriamMibao温唯
2019.02.11,我開始了這裡…
非網頁程式背景的 me 硬要WordPress架站一切自己來,所有的細節,從0開始,自己架站會遇到的問題,遇到了才知道!一路走來跌跌撞撞,摸索過國內外能夠解決問題的資料,是不是該好好紀錄這一段跌跌撞撞的探索日記?
或許,也能帶給你們一些幫助...
文章中所推薦或提及的架站產品或服務,部分是聯盟合作所提供的,如果你透過我所提供的聯盟網址去購買,我也能獲得收益,雖然金額很少,但是,你們的隨手點擊與購買,就能讓我繼續經營下去,提供更多免費的 WordPress 架站教學。
以下歡迎留言討論囉!
我只想當個旁觀者,有新的留言請通知我(按一下輸入Email信箱)
想Fallow哪種留言?
0 留言板
Inline Feedbacks
查看所有留言
❤ 謝謝你的咖啡 ❤
請温唯喝咖啡的可愛人兒
謝謝你們的溫暖與肯定
是我繼續分享下去的力氣
請温唯喝杯咖啡吧
Thank U ❤ 
米雪
NT$200
感謝您詳實資料的分享與問題解答,+小小心意,+望不嫌棄!+ 祝福您身體健康,+平安如意,+豐盛圓滿!
Thank U ❤ 
hope
NT$500
感謝贊助支持
Thank U ❤ 
Harry
NT$100
感謝回答我頁面問題
Thank U ❤ 
mira
NT$150
謝謝提供很多關於防曬產品的測試心得
Thank U ❤ 
路人
NT$49
感謝贊助支持
Thank U ❤ 
Ethan
NT$100
最近有留言詢問也快速獲得回復了~一點小心意給您:)
Thank U ❤ 
Annie
NT$60
謝謝溫唯
Thank U ❤ 
Mei
NT$49
謝謝你很用心的打很多實用的商品文章。讓我了解很多,謝謝你的熱心分享!
Thank U ❤ 
小Q
NT$150
謝謝溫唯~以後會繼續支持<3
Thank U ❤ 
游雅涵UU
NT$1000
溫唯您好~我是UU,感謝您這麼用心地分享,我也曾陷入精油保養的錯誤觀念裡,造成粉刺痘痘狂長,變成酒糟肌,雖然有看醫生擦藥-思媚、樂淨,但醫生不會與病患討論什麼保養品才合適,希望能向您學習,使肌膚更好~
Thank U ❤ 
小Q
NT$150
謝謝溫唯的細心解答,以後會繼續支持!🥰
Thank U ❤ 
Trista
NT$50
感謝分享~~~~
Thank U ❤ 
邱垂昀
NT$150
我是小Q也是小R啦~ 隨便亂取的綽號,結果在不同文章發問的時候忘記上次是用哪個英文字母XD 謝謝溫唯專業的文章和用心的回答!真的很有幫助,支持你繼續經營下去~~!!
Thank U ❤ 
匿名
NT$150
非常專業, 雖然只看幾篇而已,但我已受益良多. 倒是我對防水和防曬力那兩部分的實驗結果覺得非常驚訝. 乾性敏感肌的我十幾二十年以來一直都是混著資生堂的艷陽下50++++ 乳液(淺藍色深藍色都放)和歐系的兒童防曬霜(秋冬還會混一點維他命E油)在使用, 因為夠油夠防水, 中午補擦一下, 覺得我用了世界上最完美的防曬組合, 又有保護力又不會乾, 氣色看來也不錯, 不太顯老哩...不過看了你的實驗和說明, 我才了解, 是我一年一次的雷射和座位旁的厚窗簾救了我, 和我擦的防曬看來是沒太大關係. 三年多前換了工作岡位的我到了一間前面沒有窗簾可遮蔽窗戶的辦公室, 加上三年以上沒打雷射, 雖然不多, 但睽違很久的斑又回頭來找我了, 法令也變深一點了. 有點小難受 >_<. 剛剛根據你的實驗, 訂了一條德國製的妮維雅敏感肌的防曬霜, 打算來混一些防水力強的日系防曬(Alley我也買了一個小條的, 因為你說比安耐曬還防水耶...)和似乎除了油沒啥用的雅漾全效潤色來一起混用看看.期待他們能各司其職,讓我皺紋不要越來越深. 謝謝你. 噢,小小一杯咖啡而已, 請你笑納, 請不要公布姓名喔~
Thank U ❤ 
許亞盈
NT$150
感謝支持贊助
Thank U ❤ 
許亞盈
NT$300
感謝支持贊助
Thank U ❤ 
張惠雯
NT$45
感謝支持贊助
Thank U ❤ 
shelly
NT$250
我最近也非常喜歡艾莉莎公主的洗臉巾,質地非常棉柔,不傷害皮脂膜,也具有基礎的去脂力,是敏弱時期的清潔好夥伴唷!
Thank U ❤ 
麋鹿的夏天
NT$300
過敏和痘痘的情況有改善了嗎?透過正確的護膚方式,才能保護皮脂膜不被破壞,如此才有機會治療痘痘,希望下次能聽到妳傳來健康皮膚的消息唷!
Thank U ❤ 
蔡孟樵
NT$250
謝謝你的咖啡(愛心)如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
鄭俊
NT$500
網站有任何問題都可以再詢問唷!
Thank U ❤ 
邱英倢
NT$900
你們的網站進行到哪裡了呢?有沒有其他的問題呢?
Thank U ❤ 
謝正家
NT$900
不曉得是否更熟悉 soledad 和 Elementor 的操作呢?有任何問題都可以再詢問唷!
Thank U ❤ 
孫依賢
NT$900
過敏和痘痘的情況有改善了嗎?透過正確的護膚方式,才能保護皮脂膜不被破壞,如此才有機會治療痘痘,希望下次能聽到妳傳來健康皮膚的消息唷!
Thank U ❤ 
邱英倢
NT$900
新手架站真的很不容易,温唯也是過來人,有任何問題都歡迎切磋交流唷!
Thank U ❤ 
鄭俊維
NT$90
謝謝你信任温唯,之後若還有其他問題,都歡迎再提問唷!
Thank U ❤ 
鄭俊維
NT$500
謝謝你信任温唯,之後若還有其他問題,都歡迎再提問唷!
Thank U ❤ 
鄭俊維
NT$500
謝謝你信任温唯,之後若還有其他問題,都歡迎再提問唷!
Thank U ❤ 
翟翱
NT$150
謝謝你的咖啡(愛心)
如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
鄭俊維
NT$500
謝謝你信任温唯,協助你處理問題的過程中,也讓我更熟悉 Newspaper 這個主題的功能,之後若還有其他問題,都歡迎再提問唷!
Thank U ❤ 
陳麗妃
NT$45
謝謝你的咖啡(愛心)
如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
JIN
NT$150
最近得美登有一支高防禦力的防曬也非常透明唷!比美膚娜娜更透明,當然,一樣也有油光煥發的問題,不過,至少沒有美膚娜娜那麼嚴重,而且,泛白程度又更低了,有機會也可以試試唷!
Thank U ❤ 
黃紫茵
NT$150
謝謝你的咖啡(愛心)
如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
許惠雯
NT$150
謝謝你的咖啡(愛心)
如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
張晏婕
NT$500
過敏的狀況有沒有改善了呢?如果在清潔方面遇到瓶頸,歡迎隨時進一步討論唷
Thank U ❤ 
KT
NT$900
後來好久都沒和你聯繫,你寄給我的四支產品,有一支真的好讚,值得好好介紹,也有許多關於產品和品牌的想法想和你聊聊,過陣子忙完後再找你啦!
Thank U ❤ 
西尼
NT$45
謝謝你的咖啡(愛心)如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
菲菲
NT$700
不曉得你的網站目前的進度如何呢?有任何問題可以再諮詢唷!
Thank U ❤ 
FALA LING
NT$250
謝謝你的咖啡(愛心)如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
王小姐
NT$150
謝謝你的咖啡(愛心)如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
賈超然
NT$150
謝謝你的咖啡(愛心)如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
Vivian
NT$250
謝謝你的咖啡(愛心)不曉得是哪一類型的文章帶給你幫助呢?希望日後有機會與妳在文章留言板討論唷!
Thank U ❤ 
pegasus
NT$45
又見面囉!謝謝你的咖啡,也祝福妳一切順利唷!
Thank U ❤ 
温炯杰
NT$250
謝謝你的贊助,我會繼續撰寫更多關於WordPress架站過程中可能會遇到的各種疑難雜症。如果有任何問題,歡迎在文章的留言板中討論唷!
Thank U ❤ 
cloree
NT$250
謝謝你的鼓勵❤我會加油!!(Fighting!!)其實我有好多產品想要分享給大家,但是,苦於沒有太多時間撰寫完整的分析文章,因為我不想毫無依據地胡亂推薦,每個我自己持續使用的產品,背後都有各自的理由與故事...請放心,我一定會找時間妥善地整理這些資料,再完整地分享,我希望大家能夠在詳細的解說下,選擇真正符合需求的產品唷!
Thank U ❤ 
宥穎
NT$250
真的好開心你也踏上了「Less is more」的護膚路。 其實呀,護膚保養可以很簡單,也可以很難。 最簡單的作法就是「少做少錯」,而最難的就是找到「真正有效」+「不會出錯」的產品! 我也在尋找中,在這之前,「Less is more」是我們必須堅守的底線。 哪天真讓我找到了,我一定會迫不及待地分享,希望那天不會太久唷(笑)
Thank U ❤ 
黃秋逢
NT$45
雖然你沒有留下任何的痕跡,不曉得是哪一類的文章給了你幫助(我姑且猜著是WordPress架站相關吧!)謝謝你的贊助,如果有任何問題,歡迎在文章下方的留言板留下你的足跡,好讓我認識你唷!
Thank U ❤ 
Titi
NT$45
老實說,在你詢問的時候,我還沒有增減Server的經驗呢!於是我便自己操作一次,當然也遇到了和你一樣的問題(笑);立刻向客服求救,才有辦法完整地回覆你。Cloudways是我目前最滿意的主機,日後有其他操作上的問題,歡迎再回來討論唷
Thank U ❤ 
瑋瑋
NT$150
和你聊天真的很開心,相信我們都為彼此帶來許多更寬廣的護膚經驗。雖然我們各自都相當忙碌,但是每每看到你的留言,還是迫不及待地想要趕快與妳一起討論與分享唷❤
Thank U ❤ 
pegasus
NT$45
雖然你沒有留下隻字片語,留下的電話和Email信箱也是虛擬的...但是我相信你從温唯這裏帶走的,遠比這杯咖啡更有價值☺

Copyright ©miriammibao.com all rights reserved|Designed by MiriamMibao温唯 Since 2014.

-
CLOUDWAYS 專屬優惠☞註冊輸入推薦碼MMM8立即享首二月8折優惠點我複製優惠碼GO!!!
miriam wei design wp logo-4 circlemiriam wei design wp logo sticky
0
對文章有任何疑問或想法嗎?歡迎一起討論唷!x