スターバックスログインページの例

n/a.ターゲット

Youtube iframe APIを使用してビデオバックグラウンドを追加[YouTube Player API]
[YouTube内蔵プレイヤーとプレーヤーパラメータ]

HTML

<!-- YOUTUBE -->
<section class="youtube">
  <div class="youtube__area">
    <div id="player"></div>
  </div>
  <div class="youtube__cover"></div>
  <div class="inner">

    <img src="./images/floating1.png" alt="Icon" class="floating floating1" />
    <img src="./images/floating2.png" alt="Icon" class="floating floating2" />

  </div>
</section>

CSS

.youtube {
  position: relative;
  height: 700px;
  background-color: #333;
  overflow: hidden;
}
.youtube .youtube__area {
  width: 1920px;
  background-color: orange;
  position: absolute;
  left: 50%;
  margin-left: calc(1920px / -2);
  top: 50%;
  margin-top: calc(1920px * 9 / 16 / -2);
}
.youtube .youtube__area::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.youtube .youtube__cover {
  background-image: url("../images/video_cover_pattern.png");
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#player {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.youtube .inner {
  height: 700px;
}
.youtube .floating1 {
  position: absolute;
  top: 50px;
  left: 0;
}
.youtube .floating2 {
  position: absolute;
  top: 350px;
  left: 150;
}

スタイルのみのために存在するのはhtml構造ではなくcssで作成することが望ましい.したがって、仮想クラスセレクタ.youtube .youtube area::beforeに制御(beforeは行内要素、display:block;)

margin-top: calc(1920px * 9 / 16 / -2);横幅を基準として、縦幅を16:9の割合で9を16で割った後、-2はこの要素の縦幅を半分に上げることができます.(YouTubeやVimeoにビデオを挿入する場合に便利ですが、通常は16:9の割合で提供されます)

内蔵プレーヤーには、少なくとも200 x 200ピクセルの表示領域が必要です.コントロールがプレーヤーに表示されている場合は、最小サイズ未満に縮小するのではなく、表示領域を十分に大きくする必要があります.16:9プレーヤーの場合、横480ピクセル、縦270ピクセル以上を指定することをお勧めします.

JS

// 2. This code loads the IFrame Player API code asynchronously.
 var tag = document.createElement('script');

 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 // 3. This function creates an <iframe> (and YouTube player)
 //    after the API code downloads.

 function onYouTubeIframeAPIReady() {
  // <div id="player"></div>
  new YT.Player('player', {
     videoId: 'An6LvWQuj_8', // 최초 재생할 유튜브 영상 ID
     playervars: {
       autoplay: true, // 자동 재생 유무
       loop: true, // 반복 재생 유무
       playlist: 'An6LvWQuj_8' // 반복 재생할 유튜브 영상 ID 목록
     },
     events: {
       onReady: function (event) {
        event.target.mute() // 음소거
       }
     }
   });
 }

・onYouTubeIframeAPIReadyこの関数の名前は外部からインポートされたJavaScriptライブラリが独自に検索するため、この関数の名前を絶対に変更することはできません.

振り返る

初めて動画の背景を入れ、YouTubeで提供されているiframeタグを使ってプレーヤーに挿入することで、簡単に実現できます.サポートされているパラメータはサイト上でも良いので、後でAPIを使うときは公式ドキュメントを参考にしてみてください!