任意の秒数から再生されるYouTube動画をポップアップで表示させる方法

:open_book: モバイルやSNS等での動画視聴が普及した現代において、動画は画像やテキストでは表現できない魅力を伝えるための非常に有力なコンテンツです。
サイトのトップ画像やキャッチコピーは、ユーザー行動を左右する重要なコンテンツですが、動画においては、その「出だし」が重要になります。ただし、訪問者のタイプに応じて動画を編集し、出し分けをするには非常に工数がかかってしまうのがネックです。

そこでこの記事では、YouTube動画を任意の秒数から開始するように設定し、Ptengine ExperienceでWeb接客やA/Bテストを実施する方法をご紹介します:blush:

概要

今回設定する挙動の概要は下記になります:

  • :point_right: デモページ :point_left:
    本来はオープニングから始まる動画ですが、実際のお客様のインタビューという最も重要なコンテンツ部分から再生される様に設定しています。

※ご利用中のブラウザ環境により自動再生が適用されない場合があります。
その場合はこちらの記事をご参考ください。

設定手順

1. 既存のYouTube動画を用意し、開始させたい秒数を確認する

例:30秒、95秒など

2. 既存の動画URLに「?t=秒数」を足す

例:元のURLを16秒から開始させたい場合

3. Experienceでポップアップを作成する

4. ビデオのサイズを調整・確認する

後の工程でコードを記述する際にビデオの要素サイズを入力する必要があります。
そのため下記の手順でビデオを表示させたいサイズを確認し、メモしておいてください。

5. クリエイティブを編集

6. コードモード > JavaScript 欄に下記のコードを入力する

var checkVideo = setInterval(function(){
    if(document.querySelector("iframe.ecYoutube")){
        var divPlayer = document.createElement("div");
        divPlayer.id = "playerPt";
        document.querySelector(".ecYoutubeBase").append(divPlayer);
        document.querySelector("iframe.ecYoutube").remove();
        clearInterval(checkVideo);
        function onPlayerReady(){
            player.loadVideoById({'videoId': 'ビデオIDを入力',
                       'startSeconds': 0,
                       'suggestedQuality': 'large'})
        }

        player = new window.YT.Player('playerPt', {
            height: 300,
            width: 200,
            playerVars: {
                'autoplay': 1,
                'loop': 0,
                'controls': 0,
                'enablejsapi': 1,
            },
            videoId: 'ビデオIDを入力',
            events: {
              'onReady': onPlayerReady
            }
        });
    }
},100)

7. クリエイティブを保存して、各種配信設定を行い体験を公開します

公開前にプレビューをご確認ください。A/Bテストなども任意でご設定ください。

補足

※ご利用中のブラウザ環境により自動再生が適用されない場合があります。
その場合はこちらの記事(外部サイト)をご参考ください。

手順は以上になります。

ご不明点ございましたら、ご質問ください:blush: