CSS 讓嵌入的Youtube播放畫面也有RWD效果

CSS 讓嵌入的Youtube播放畫面也有RWD效果

CSS:

.youtube {

 position: relative;

 padding-bottom: 56.25%; // 以圖片比例計算16:9

 padding-top: 30px;

 height: 0;

 overflow: hidden;

}

@media (max-width: 992px) {

 .youtube iframe, .youtube object, .youtube embed {

  //position: absolute; // 視情況使用

  //top: 0; // 視情況使用

  //left: 0; // 視情況使用

  width: 100%;

  //height: 100%; // 視情況使用

 }
}

HTML:

<div class="youtube">

<iframe ....... ></frame>

</div>