youtube ショート 埋め込み 親要素のサイズ css

なんかうまくいかなかったのでメモ。

フルスクリーンや通常埋め込みじゃなくて親要素のサイズに埋め込みたかったのでiframeじゃなくて、cssでパワープレイ。

HTML

わかりやすくyoutube-wrapperでdivに分ける。
widthをコピーしたソースから、100%に。
同様にheightも。
srcはオプションは自由に変えていい。変えなくてもいい。あとで下に書く。

            <div class="youtube-wrapper">
              <iframe
                width="100%"
                height="100%"
                src=
                title="title"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen
              ></iframe>
            </div>

CSS

aspect-ratio 縦横比を入れておいたらうまくいった。
細かい設計じゃなくて、とにかく親要素のサイズに合わせたいときのメモなので、100%が良くないのはわかってるけど、これで動いたよってことで。許してね。

.youtube-wrapper {
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
}

.youtube-wrapper iframe {
  width: 100%;
  height: 100%;
}

src=

自動再生つきなので注意。
下記このままコピペでok
・<your video id>を動画のidで書き換え
・２行目？以降がパラメータ
src="https://www.youtube.com/embed/<your video id>?
autoplay=1&mute=1&playsinline=1&loop=1&playlist=<your video id>"

以上。
備忘録的に。