YouTube の埋め込みプレーヤーでページの背景を動画にする
弊社とは全然関係ないけど、https://roqu.ro/ というサイトでページの背景が動画になっててカッコいいなーと思った(しかも読み込みが早かった)ので、HTML を見てみたら、なんと iframe だった!
埋め込み.html
<iframe id="bgMovie" class="bg-movie" style="height: 592.312px; width: 100%; margin-top: -296.156px; margin-left: 0px; left: 0px; top: 50%;" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/Xccw5Ns56FY?rel=0&controls=0&showinfo=0&iv_load_policy=1&wmode=transparent&enablejsapi=1&origin=https%3A%2F%2Froqu.ro&widgetid=1"></iframe>
allow="autoplay"
と ?mode=transparent
で、こんな感じになる模様 margin-top: -296.156px;
ってなってるのはウィンドウサイズに合わせているのだろうか 画像でいう
background-size: cover
みたいなこと