[CSS] youtube影片100%響應式RWD

在作網頁設計時常常需要嵌入youtube影片，但一碰到RWD網頁時，影片就會遇上無法隨著螢幕縮放的問題！這是因為youtube供嵌入用的iframe原始碼已經是固定尺寸了，因此我們需要修改以讓影片能跟著RWD一同縮放。☞ 如何將youtube影片嵌入RWD(自適應網頁)

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
 
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

padding-bottom: 56.25%為影片高度與寬度的比例16:9計算得來，9除以16=0.5625換算高度比0.5625=56.25%
padding-top: 30px:用於修正的高度，可用25px或30px

---

Source

☞ 利用 CSS 做出響應式的 iframe (youtube video)

Image Source

☞ New Study Shows Which Keywords on YouTube Get the Most Video Views