WordPress教學 Youtube 入門必學 推薦外掛 網路行銷祕技

如何在WordPress上嵌入響應式的YouTube影片

youtube-embed-wordpress

Youtube是現在每個部落格常常會使用到的影片平台,而且在WordPress後台,要置入一個Youtube影片,只要把影片的網址直接複製貼上在文章裡面,WP就會自動把網址讀成影片,可以說是十分的方便。

然而我自己在使用這個功能時,發現有些佈景主題並沒有寫好響應式Youtube影片的功能,導致影片在手機上超出螢幕範圍,非常尷尬。身為WP玩家,看到網站不支援RWD時,絕對是無法忍受的。所以在此要推薦給大家兩種方法,一是借用免費Youtube外掛,二是用CSS來解決問題。

方法1:用外掛解決

外掛載點:Youtube Embed Plus

YouTube Embed WordPress Plugin這個外掛,安裝它之後,只要去後台Settings的地方,將響應式功能打勾開啟之後,網站上所有的Youtube影片都會自己縮放啦!

但是這畢竟是免費的外掛,難免有廣告。如果不喜歡在自己的後台看到那些廣告,或是覺得外掛有很多功能用不到那可以試試以下的CSS方法。

 

方法2:用CSS

如果對html&CSS有初步的了解,建議採用此法。

先將以下的CSS加入到子主題的style.css

接下來在嵌入Youtube影片時,只要在嵌入的程式碼外面加上一個div標籤,

並且將class命名為 video-container,如下範例:

靠著以上方法,不僅適用於Youtube影片,也可以讓Vimeo等任何其他平台的影片,都具備響應式的功能。

發表留言

0 comments on “如何在WordPress上嵌入響應式的YouTube影片

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *