![見出し画像](https://assets.st-note.com/production/uploads/images/121608183/rectangle_large_type_2_5f61feb0a2a50bd3a7082c0e13bb8e82.png?width=1200)
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で書き換え
・2行目?以降がパラメータ
src="https://www.youtube.com/embed/<your video id>?
autoplay=1&mute=1&playsinline=1&loop=1&playlist=<your video id>"
以上。
備忘録的に。
この記事が気に入ったらサポートをしてみませんか?