ページに埋め込んだYoutube動画による遅延を緩和する方法

はじめに

• 昨今のランディングページは動画を使用しているところが多くて、私自身も制作しているとよく使うのがYoutube動画。Youtubeから簡単に埋め込みコードが発行できてコピペするだけですぐ使えるのが大きなメリットですよね。
• ただその代わりに大きなデメリットがあります。それがページの読み込み速度の低下です。
• その読み込み速度の低下を改善する方法を備忘録として書いておこうかと思います。

Youtube動画のメリット・デメリット

• 前述したとおり、Youtube動画の埋め込みには簡単というメリットが大きく、Youtubeの共有ボタンから埋め込みコードが発行されるのでコピペするだけです。
• 逆に読み込み速度が低下しやすいのが大きなデメリットで、単純に読み込み容量が大きいことと外部サイトから参照していることが主な原因です。

コード

HTML

<div class="play-btn">動画を見る</div>
<div class="movie">
  <div class="movie-close"></div>
  <div class="movie-window"></div>
</div>

CSS(SCSS)

.play-btn {
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  background-color: #4169e1;
  border-radius: 15px;
  cursor: pointer;
}

.movie {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;

  &.inview {
    opacity: 1;
    visibility: visible;
  }

  &-close {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    cursor: pointer;

    &::before,
    &::after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #fff;
    }

    &::before {
      transform: rotate(20deg);
    }
    &::after {
      transform: rotate(-20deg);
    }
  }
}

Javascript

const playBtn = document.querySelector('.play-btn');
const movie = document.querySelector('.movie');
const movieClose = document.querySelector('.movie-close');
const movieWindow = document.querySelector('.movie-window');

playBtn.addEventListener('click', () => {
  movie.classList.add('inview');
});

movieClose.addEventListener('click', () => {
  movie.classList.remove('inview');
});

playBtn.addEventListener('click', () => {
  movieWindow.innerHTML = 'Youtubeで発行した動画の埋め込みコード';
});

仕様

• 今回はボタンを押すと動画が表示される仕様です。
• HTMLには埋め込みコードを貼り付けていないので、ページの読み込み時には動画が読み込まれずボタンを押して初めて動画が読み込まれる流れになっています。
• ページ表示の際の読み込みに動画の分が含まれないので、結果的に表示速度が上がります。

最後に

• PageSpeedInSightsみたいなツールでランディングページの読み込み速度を図ったときに点数が低いとへこみますよね…。
• どこが原因か調べて埋め込んだYoutube動画が表示を遅くしているということでしたら、一度この方法を試してみてはいかがでしょうか。（少しでも埋め込みYoutube動画の遅延に苦しむ人が減ればいいな～と祈っております）