html YouTube上の埋め込みをレスポンシブに

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html YouTube上の埋め込みをレスポンシブに相关的知识,希望对你有一定的参考价值。

<style>
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
</style>

<div class="youtube">
  <iframe src="https://www.youtube.com/embed/R1_Qo-MqFc4?rel=0" width="100%" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

以上是关于html YouTube上の埋め込みをレスポンシブに的主要内容,如果未能解决你的问题,请参考以下文章

html IE9未満をレスポンシブに対応させる。

javascript 20180516谷歌地图をレスポンシブ対にに

scss 谷歌地图のiframe版をレスポンシブに対応させる

html レスポンシブ画像

html レスポンシブ画像

html レスポンシブ的GoogleMap