Youtube影片的RWD嵌入語法是什麼?菜鳥小編必備知識EP02

在前一篇中已經把換行的語法交給大家了,接著就是YOUTUBE影片要怎麼嵌入?在比較新的編輯器中通常都會內建一些RWD的功能鍵。但有些使用傳統編輯器的網站,如果直接使用Youtube的語法就會出現影片在桌機版太小,但在手機上又超出畫面的問題。這一篇會教大家快速的取得Youtube影片的RWD嵌入語法。

一般Youtube影片的嵌入有限定大小

在影片右下方的地方可以看到一個分享,點下去之後可以看到【<>嵌入】的地方,點下去之後會跳出一段html語法。這個語法上面是帶有影片的長、寬限制,放到網頁上不會響應式隨裝置改變大小。

一步驟產出Youtube影片RWD嵌入語法

這邊我要介紹我最常用的一個網路工具-Embed Responsively,這一個工具可以快速將影片網址轉成RWD響應式的語法。使用上非常簡單,一鍵產出Youtube影片的RWD html程式碼。

網路工具-Embed Responsively網址:embedresponsively.com

先將要分享的Youtube的影片網址複製

複製Youtube影片網址

將網址貼到頁面中的欄位後,按下【embed】

Youtube影片以RWD方式嵌入-把Youtube影片網址貼到Embed Responsively

最下方就會有RWD響應式語法產生,把整段語法複製之後,在html編輯器中貼上就可以了。

透過這樣的方式,即使不懂html語法也可以快速的將影片以RWD方式放在網站上。同時Embed Responsively還另外有提供Vimeo、Dailymotion、Google Maps、Getty Images等其他的影片、圖片嵌入,這樣以後就不會再有醜醜的嵌入了。

發佈留言