Vimeoの動画再生後にリンクを自動表示する方法【WordPress対応】
どうも、Webマーケティング専門家/内向型人間研究家のユウキです＾＾
どうも、Webマーケティング専門家/内向型人間研究家のユウキです＾＾
WebマーケティングやWeb制作のオタクである僕は、ぜひ実践したいことがありました。
Vimeoの動画で指定した再生時間が経過した後に、自動的に商品の申し込みフォームへのリンクを表示させることです。
試行錯誤を繰り返した結果、なんとかWordPressに実装できました！
WordPressの記事にコードを埋め込むだけなので、難しい作業は必要ありません。
その方法を詳しくまとめたので、ぜひ活用してみてください＾＾
僕がWordPressに実装したかったこと
なかなかマニアックな試みだね。
画像で表すとこんな感じだよ！
僕はVimeoの動画講座の最後に商品のオファーをしているのですが、オファーは興味を持ってくれた人にのみ届けたいと考えています。
そこで、オファーに差し掛かる前に、「商品に興味のない方はここで動画を閉じてください」と伝え、その後、商品紹介のタイミングで申し込みフォームへのリンクを表示させようと思い付きました！
最初からリンクが表示されていると、売り込み感が出ちゃうもんね。
そうなんだよ。
商品に興味のない人にまでオファーをするのは避けたいから、今回の手法を取り入れることにしたよ。
僕の優秀な相棒であるChatGPTにやり方を聞いたところ、丁寧に教えてくれました＾＾
何度もやり取りを重ねて、試行錯誤を繰り返した結果、理想の形ができたのでシェアします！
Vimeo動画で指定した再生時間経過後にリンクを自動表示する方法
手順は次の4ステップです。
Check
１．Vimeo動画の埋め込みコードを準備する
２．自動で表示されるリンクのコードを準備する
３．指定した再生時間経過後にリンクを自動表示するコードを準備する
４．WordPressの記事のカスタムHTMLブロックにコードを埋め込む
１．Vimeo動画の埋め込みコードを準備する
あなたのVimeo動画の埋め込みコードをコピーしてください。
おそらく、下記のようなコードだと思います。
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1002373727?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="course"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>Check
埋め込みコードの「iframe」を、「iframe id=”vimeo-player”」に変えてください。
例がコチラ。
<div style="padding:56.25% 0 0 0;position:relative;"><iframe id="vimeo-player" src="https://player.vimeo.com/video/1002373727?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="course"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>２．自動で表示されるリンクのコードを準備する
下記のコードをコピーしてください。
<div id="message-container" style="display:none;">
入力箇所
</div>Check
このコードの「入力箇所」に、自動で表示させたいメッセージやリンクを入力してください。
入力したメッセージやリンクが、指定の時間経過後に自動で表示されます。
例がコチラ。
<div id="message-container" style="display:none;">
<p>動画講座をご視聴いただき、どうもありがとうございました！</p>
<p>有料商品・サービスに興味を持たれた場合は、下記のリンクからお申し込みください＾＾</p>
<p><a href="https://freedom-mylife.com/">申し込みはこちら</a></p>
</div>３．指定した再生時間経過後にリンクを自動表示するコードを準備する
下記のコードをコピーしてください。
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var iframe = document.querySelector('#vimeo-player');
if (iframe) {
var player = new Vimeo.Player(iframe);
// 文章を表示させる再生位置（秒）
var targetTime = 秒数を入力; //
// 再生中に定期的に現在の再生時間をチェック
player.on('play', function() {
var interval = setInterval(function() {
player.getCurrentTime().then(function(seconds) {
if (seconds >= targetTime) {
document.getElementById('message-container').style.display = 'block';
clearInterval(interval); // 一度表示したらインターバルをクリア
}
});
}, 1000); // 1秒ごとに再生時間をチェック
});
// 再生速度が変更されたときにもタイマーを再設定
player.on('ratechange', function() {
var interval = setInterval(function() {
player.getCurrentTime().then(function(seconds) {
if (seconds >= targetTime) {
document.getElementById('message-container').style.display = 'block';
clearInterval(interval); // 一度表示したらインターバルをクリア
}
});
}, 1000); // 1秒ごとに再生時間をチェック
});
}
});
</script>Check
このコードの「秒数を入力」に、メッセージやリンクを表示させたいタイミングを、秒単位で入力してください。
例えば、動画の再生から1分後に表示させたい場合は、60と入力します。
すると、動画の再生から60秒が経過した時点で、入力したメッセージやリンクが表示されます。
例がコチラ。
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var iframe = document.querySelector('#vimeo-player');
if (iframe) {
var player = new Vimeo.Player(iframe);
// 文章を表示させる再生位置（秒）
var targetTime = 60; //
// 再生中に定期的に現在の再生時間をチェック
player.on('play', function() {
var interval = setInterval(function() {
player.getCurrentTime().then(function(seconds) {
if (seconds >= targetTime) {
document.getElementById('message-container').style.display = 'block';
clearInterval(interval); // 一度表示したらインターバルをクリア
}
});
}, 1000); // 1秒ごとに再生時間をチェック
});
// 再生速度が変更されたときにもタイマーを再設定
player.on('ratechange', function() {
var interval = setInterval(function() {
player.getCurrentTime().then(function(seconds) {
if (seconds >= targetTime) {
document.getElementById('message-container').style.display = 'block';
clearInterval(interval); // 一度表示したらインターバルをクリア
}
});
}, 1000); // 1秒ごとに再生時間をチェック
});
}
});
</script>４．WordPressの記事のカスタムHTMLブロックにコードを埋め込む
準備した3つのコードを、WordPressの記事のカスタムHTMLブロックに埋め込みます。
例がコチラ。
<div style="padding:56.25% 0 0 0;position:relative;"><iframe id="vimeo-player" src="https://player.vimeo.com/video/1002373727?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="course"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<div id="message-container" style="display:none;">
<p>動画講座をご視聴いただき、どうもありがとうございました！</p>
<p>有料商品・サービスに興味を持たれた場合は、下記のリンクからお申し込みください＾＾</p>
<p><a href="https://freedom-mylife.com/">申し込みはこちら</a></p>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var iframe = document.querySelector('#vimeo-player');
if (iframe) {
var player = new Vimeo.Player(iframe);
// 文章を表示させる再生位置（秒）
var targetTime = 60; //
// 再生中に定期的に現在の再生時間をチェック
player.on('play', function() {
var interval = setInterval(function() {
player.getCurrentTime().then(function(seconds) {
if (seconds >= targetTime) {
document.getElementById('message-container').style.display = 'block';
clearInterval(interval); // 一度表示したらインターバルをクリア
}
});
}, 1000); // 1秒ごとに再生時間をチェック
});
// 再生速度が変更されたときにもタイマーを再設定
player.on('ratechange', function() {
var interval = setInterval(function() {
player.getCurrentTime().then(function(seconds) {
if (seconds >= targetTime) {
document.getElementById('message-container').style.display = 'block';
clearInterval(interval); // 一度表示したらインターバルをクリア
}
});
}, 1000); // 1秒ごとに再生時間をチェック
});
}
});
</script>これで作業は完了です！
指定した時間が経過した後に、メッセージやリンクが表示されるか確認してみてください＾＾
Point
動画を倍速で再生したり、途中で一時停止した場合でも、視聴者が実際に再生した時間に応じてメッセージやリンクが表示されます。
まとめ
この方法であれば、Vimeoの動画で商品を紹介するタイミングで、申し込みフォームへのリンクを表示できるね！
より自然にオファーができるようになるから、おすすめだね！
VimeoとWordPressを使ってセールスをする際には、ぜひ効果的に活用してみてください＾＾
