1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 如何將Youtube影片,嵌入網頁後並支援RWD自適應調整播放框尺寸

如何將Youtube影片,嵌入網頁後並支援RWD自適應調整播放框尺寸

2023/07/13

梅問題-如何將Youtube影片,嵌入網頁中並支援RWD自適應調整播放框尺寸
  最近身旁有朋友問到梅干,當把Youtube影片嵌到網頁時,要如何讓它支援RWD,一般來說最簡單的作法就是將iframe中的width設為100%,這時寬度就會隨著區塊自動的縮放,但高度就會一直維持著Youtube所設定的315,因此若版面很大時,這時影片就會變成極度寬扁,因此如何將Youtube的影片嵌入網頁,又能支援RWD自適應的效果呢?其實方法很簡單,接下來梅干就來實作一下給各位看囉!


Step1
首先進到Youtube後,點影片下方的分享
梅問題-如何將Youtube影片,嵌入網頁中並支援RWD自適應調整播放框尺寸


Step2
接著點嵌入
梅問題-如何將Youtube影片,嵌入網頁中並支援RWD自適應調整播放框尺寸
Step3
接著將嵌入影片中的原始碼複製起來。
梅問題-如何將Youtube影片,嵌入網頁中並支援RWD自適應調整播放框尺寸
Step4
貼到自己網頁中的html裡。
梅問題-如何將Youtube影片,嵌入網頁中並支援RWD自適應調整播放框尺寸
Step5
接著再iframe外層再包一層div,並將class命名為yt
梅問題-如何將Youtube影片,嵌入網頁中並支援RWD自適應調整播放框尺寸
Step6
這時再將yt的padding-bottom設為56.25%,而這一個數字是怎麼來的呢?其實就是用Youtube所提供的560/315=0.5625*100後,就等於56.25%,因此若是希望影片為4:3的話,那就是75%,當有了高度值後,iframe就可將height設為100%囉!這時區塊就會依照設定的比例進行縮放囉!
梅問題-如何將Youtube影片,嵌入網頁中並支援RWD自適應調整播放框尺寸
Step7
由於目前是依照區塊的寬度直接延展,若是希望設定影片的起始寬度的話,這時再最外面再包一層div, 接著再這一層div看寬度設為max-width,就可指定一開始影片的寬度值啦!因此下回再嵌入Youtube影片到網頁中時,不妨可試試看囉!
梅問題-如何將Youtube影片,嵌入網頁中並支援RWD自適應調整播放框尺寸