MENU

チャプターへのリンク付きでYouTube動画をHTMLに埋め込む方法

JavaScriptで機能の実装
masu
YouTube動画の埋め込み時にチャプターボタンを設置する方法

HTMLに埋め込んだiframeのYouTube動画において、任意の時間から再生がスタートするボタンを設置する方法をご紹介しています。

動画チャプターを設定しているYouTube動画を、HTMLに埋め込む際に役に立つ実装方法となります。JavaScriptで実装しています。

目次

チャプターボタン付きでYouTubeを埋め込んだ例

今回実装したのはこちらです。

デモページ

右側にあるチャプターのリンクボタンをクリックすると、そのチャプターの時間から始まる動画が左側で再生されます。

チャプターの再生開始時間は任意の時間を設定することが可能です。

用意したファイルは以下の通りです。

ファイル一式
  • index.html
  • style.css
  • script.js

コードの見本

以下がコードの見本です。コピペしていただくとそのまま動くかと思います。

index.html

<div class="inner">
    <!-- 動画 -->
    <div class="movie">
        <div class="movie__inner">
            <iframe id="js-player" src="https://www.youtube.com/embed/mGcZGx99A34" title="YouTube video player"></iframe>
        </div>
    </div>
    <!-- 動画ここまで -->
    <!-- チャプターボタン -->
    <div class="chapter">
        <p>チャプター</p>
        <div class="chapter__list">
            <a href="https://www.youtube.com/embed/mGcZGx99A34?start=3600" class="js-chapter">
                <span>1.</span>
                <span>1:00</span>
            </a>
            <a href="https://www.youtube.com/embed/mGcZGx99A34?start=5400" class="js-chapter">
                <span>2.</span>
                <span>1:30</span>
            </a>
            <a href="https://www.youtube.com/embed/mGcZGx99A34?start=6300" class="js-chapter">
                <span>3.</span>
                <span>1:45</span>
            </a>
        </div>
    </div>
    <!-- チャプターボタンここまで -->
</div>

style.css

.inner {
  display: flex;
  justify-content: space-between;
  gap: 1em;
}

.movie {
  width: 65%;
}

.movie__inner {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 65%;
}

.movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background-color: transparent;
  overflow: hidden;
}

.chapter {
  width: 30%;
}

.chapter__list {
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.chapter__list a {
  text-decoration: underline;
}

script.js

const player = document.getElementById('js-player');
const chapters = document.querySelectorAll('.js-chapter');

for (let i = 0; i < chapters.length; i++) {
    const chapter = chapters[i];
    chapter.addEventListener('click', function (e) {
        e.preventDefault();
        const href = this.getAttribute('href');
        if (player) {
            player.src = `${href}&autoplay=1&mute=1`;
        }
    });
};

WAI-ARIAによるスクリーンリーダーへは対応していません。実務では必要に応じて、スクリーンリーダーへの対応を強化するため正しくWAI-ARIAを設定しましょう。

コードの解説

HTMLとJavaScriptのコードを中心に解説していきます。

再生開始時間をセット

<a href="https://www.youtube.com/embed/mGcZGx99A34?start=3600" class="js-chapter">

チャプターリンクのaタグのhref属性では、末尾に「?start=3600」のように、再生開始時間をセットします。秒計算のため、3600で「1時間」となります。

クリック時にhref属性を変数に格納

const href = this.getAttribute('href');

クリックされたaタグのhref属性を変数に格納しています。前行のe.preventDefault();により、aタグのデフォルトの動作をキャンセルしています。

iframeのsrc属性を書き換え

if (player) {
    player.src = `${href}&autoplay=1&mute=1`;
}

ページ内に該当するiframeタグが存在する場合に、そのiframeのsrc属性を、クリックされたボタンのhref属性に書き換えています。

以上です。最後までお読みいただきありがとうございました。

JavaScriptで機能の実装
目次