Zenn
💻

【React】YouTubeの埋め込みでサイトが重いのを改善した話

2021/11/14に公開
React
YouTube
tech

経緯

自分のサイトのトップページにYouTubeの埋め込み動画を6つ載せたらサイトが極端に遅くなったので改善しようと試みました。

https://yotta-site.vercel.app/

スマホ パソコン

調べてみた結果

YouTubeの埋め込みが遅いという話は、いろんな人が記事にしているので解決方法は直ぐに出てきました。
大きく分けて2つあり、

  • 遅延読み込みをする
  • サムネイルの画像を表示させてクリックしたら動画を表示させる

という方法があります。

今回は2番目の方法で実装してみることにしました。

Reactで実装してみる

いろいろ調べて見たサイトには、WordPressの解決策やjQueryやJavaScriptでの実装方法はあったのですが、Reactの実装方法はほぼなかったのでReactで自作してみることにしました。

動作

実装したらこんな感じになります。

実装コード

前提として、create-react-appをしている事として話していきます。

まず、App.jsは以下のようにします。

App.js
import React, { useState } from "react";
import "./App.css";

function App() {
  const [isThumbnail, setIsThumbnail] = useState(true);

  return (
    <div className="App">
      {isThumbnail ? (
        <img
          src=`https://img.youtube.com/vi/${youtubeId}/maxresdefault.jpg`
          onClick={() => setIsThumbnail(false)}
          alt="サムネイル"
        />
      ) : (
        <iframe
          src={`https://www.youtube.com/embed/${youtubeId}?autoplay=1`}
          title="YouTube video player"
          frameBorder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
        ></iframe>
      )}
    </div>
  );
}

export default App;

CSSはこちらです。

App.css
.App {
  width: 320px;
  height: 180px;
}
.App img {
  width: 100%;
}
.App iframe {
  width: 100%;
  height: 100%;
}

解説

まず、imgタグのsrcですが、YouTubeのサムネイルを取得しています。
https://img.youtube.com/vi/${youtubeId}/maxresdefault.jpg

${youtubeId}にはYouTubeのIDを指定してください。

サムネイルの取得については下記記事を参考にさせていただきました。
https://zenn.dev/attt/articles/get-yt-thumbnail

私の場合は自分でアップした動画を取得するため、サムネイルの大きさは最大で問題ないと判断して固定です。

iframeに関しては、ほぼYouTubeの共有から埋め込みコードをコピペしてきたままです。
1つだけ追記しているのは、?autoplay=1をurlの末尾に付け加えています。

そうすることで、画像をクリックしてiframeが表示されたときに自動で再生されるので、YouTubeを再生するときと同じような動きをしてくれます。

あとは単純にuseStateで表示フラグを管理して、初期表示はサムネイル画像が表示されており、画像をクリックしたときにフラグをfalseにして、フラグがfalseの時はYouTubeの埋め込み動画が表示される仕組みになっています。

これをコンポーネント化すると、複数の埋め込み動画を表示するときもyoutubeIdを変更することで簡単に管理することができます。

結果

YouTubeの埋め込みを今回の実装に変えた結果、かなり改善されました。

スマホ パソコン

課題点

  • サムネイル画像とYouTubeの埋め込みは見た目が違うのでそこを合わせないといけない
    • 画像だけだと再生できると思われない
    • YouTubeの再生ボタンを画像の上にのせてホバーしたら色を変えるなどが必要
  • スマホは自動再生されないので2クリックする必要がある(少なくともiPhoneのsafariは)

などがあるかなと思います。

何かの参考になればうれしいです。

Discussion