JavaScriptで最後まで動画を視聴したらボタンをアクティブにする。

投稿日：2025年2月19日

マーケティングに使えそうな手法で、最後まで動画を視聴したらボタンをアクティブにする方法をご紹介します。

最後まで動画視聴したお客様に特典プレゼントするときなどに使えると思います。

DEMO

HTML

<div id="player"></div>
<button id="myButton" disabled>ボタン</button>

JavaScript

<script>
  // YouTube IFrame APIの読み込み
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // プレーヤーの生成
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'EFvzMBLm_6s', // YouTube動画IDを設定
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // プレーヤーの状態変化イベント
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      // 動画が終了した場合
      document.getElementById('myButton').disabled = false; // ボタンをアクティブにする
    }
  }
</script>

解説

YouTube IFrame APIの読み込み: YouTube IFrame APIを読み込んで、YouTube動画をWebページに埋め込めるようにします。

プレーヤーの生成:YT.Playerを使ってYouTubeプレーヤーを生成します。videoIdにはYouTube動画のIDを設定してください。

プレーヤーの状態変化イベント:onPlayerStateChangeイベントでプレーヤーの状態を監視します。 動画終了判定:event.data == YT.PlayerState.ENDEDで動画が終了したことを判定します。

ボタンのアクティブ化: 動画が終了したら、document.getElementById('myButton').disabled = false;でボタンをアクティブにします。

使い方

YOUR_YOUTUBE_VIDEO_IDの部分を実際のYouTube動画IDに置き換えてください。
HTMLファイルをWebブラウザで開くと、YouTube動画が再生されます。
動画を最後まで視聴すると、ボタンがアクティブになりクリックできるようになります。

注意

このコードはYouTube IFrame APIを使用しています。APIの仕様は変更される可能性がありますので、最新のドキュメントを参照してください。
動画IDはYouTube動画のURLに含まれています。例えば、https://www.youtube.com/watch?v=XXXXXXXXXXX の XXXXXXXXXXX 部分が動画IDです。

全体のコード

<!DOCTYPE html>
<html>
<head>
<title>YouTube動画視聴完了でボタンアクティブ化</title>
</head>
<body>

<div id="player"></div>
<button id="myButton" disabled>ボタン</button>

<script>
  // YouTube IFrame APIの読み込み
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // プレーヤーの生成
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'EFvzMBLm_6s', // YouTube動画IDを設定
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // プレーヤーの状態変化イベント
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      // 動画が終了した場合
      document.getElementById('myButton').disabled = false; // ボタンをアクティブにする
    }
  }
</script>

</body>
</html>