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等任何其他平台的影片，都具備響應式的功能。
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等任何其他平台的影片，都具備響應式的功能。