More than 1 year has passed since last update.

【Y】Youtube埋め込みをレスポンシブなサイトに埋め込む

Last updated at 2022-12-24Posted at 2022-12-24

Youtubeからコピーしたものをそのまま書いたらwidth属性のせいではみだしたりするんですよね

結論

周りをdivで囲んでaspect-ratio使うとなんとかなります

example.html

<div style="width:100%;aspect-ratio:16/9">
    <iframe style="width:100%;height:100%;" width="1920" height="1080" src="https://www.youtube.com/embed/XXXXXXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Youtubeに限らず、iframeに汎用的に使えるはず。

AlphabetAdvent Calendar 2022

Day 25

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up