iframeのレスポンシブ化
iframeのレスポンシブ化するためのcss。padding-topは、iframeの height ÷ width × 100 で%を計算してください。
Source Code
右上の「コピー」からご利用ください。
コピー
<div class="my-parts">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Wooi39K0pXg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>コピー
.my-parts {
position: relative;
width: 100%;
padding-top: 56.25%; /* = height ÷ width × 100 */
}
.my-parts iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
