markdown YouTube的レスポンシブ埋め込み

Posted 2021-05-05

<div class="u-movie-wrap">
<iframe width="854" height="480" src="https://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.u-movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.u-movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

youtubeレスポンシブ埋め込み
-----------------


A [Pen](https://codepen.io/aar1nana7/pen/ZPjRXE) by [Ryohei Iriyama](https://codepen.io/aar1nana7) on [CodePen](https://codepen.io).

[License](https://codepen.io/aar1nana7/pen/ZPjRXE/license).