【JavaScript】iframeで埋め込んだYouTube動画を操作する方法

RELEASE / 2024.4.25 UPDATE / 2024.04.22

iframe

YouTube

操作

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

iframeで埋め込んだYouTube動画はJavScriptやjQueryを使うことで再生、停止など操作することが可能です。
この記事ではJavaScriptとjQueryを使ってiframeで埋め込んだYouTube動画を操作する方法をご紹介したいと思います。

この記事の目次を表示

1 実装サンプル
2 iframeで埋め込んだYouTube動画を操作する方法
- 2.1 【手順1】URLに?enablejsapi=1を設定する
- 2.2 【手順2】YouTube動画を操作するコードを作成する
3 コードまとめ
- 3.1 JavaScriptのコードまとめ
4 jQueryのコードまとめ
5 まとめ

実装サンプル

まずは実装サンプルを見てみましょう。

JavaScriptの場合はこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

jQueryの場合はこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

codepenの環境の影響なのかmute=1で無音状態にしないと再生されないようです。また、アンミュート（音声あり）を押すと動画が止まってしまいますが、実際の環境では動作すると思います。

iframeで埋め込んだYouTube動画を操作する方法

【手順1】URLに?enablejsapi=1を設定する

YouTubeで埋め込みコードを取得するとこのようになっています。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

取得したこのコードのままでは外部からJavScriptやjQueryでYouTube動画を操作することは出来ません。操作するにはURLの末尾に以下のパラメータを追加します。

?enablejsapi=1

また、合わせてid="youtube"も追加します。

追加したコードはこちら。

<iframe id="youtube"  width="560" height="315" src="https://www.youtube.com/embed/動画ID?enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

これでJavScriptやjQueryでYouTube動画を操作する準備は完了です。

YouTubeで埋め込みコードを取得する方法はこちらのブログで詳しくご紹介しています。

【2024年最新版】WEBサイトにYouTube動画を埋め込む方法

【手順2】YouTube動画を操作するコードを作成する

JavaScriptやjQueryで操作することが出来る内容はこちら。

動画を再生する
動画を一時停止する
動画と停止する
動画をクリアする
シークバー移動する
動画をミュート（無音）に設定する
動画を音声ありに設定する
動画の音量を設定する

それぞれのコードを見ていきましょう。

動画を再生する

再生ボタンのHTMLはこちら。

<button id="play">PLAY</button>

iframeで埋め込んだYouTube動画を操作するためのコードはこちら。
jQueryを使う場合はjQueryの読み込みも忘れないようにします。

// JavaScriptの場合
const youtubeWindow = document.getElementById("youtube").contentWindow;

// jQueryの場合
const youtubeWindow = $("#youtube")[0].contentWindow;

// postMessageを送信する関数
function y_iframeController(action,arg=null){
    youtubeWindow.postMessage('{"event":"command", "func":"'+action+'", "args":'+arg+'}', '*');
};

// 再生ボタンを押した時のアクション（JavaScriptの場合）
document.getElementById('play').addEventListener('click', function(){
    y_iframeController('playVideo');
});

// 再生ボタンを押した時のアクション（jQueryの場合）
$('#play').on('click',function(){
    y_iframeController('playVideo');
});

動画を一時停止する

一時停止ボタンのHTMLはこちら。

<button id="pause">一時停止</button>

<code>iframe</code>で埋め込んだYouTube動画を操作するためのコードはこちら。
jQueryを使う場合はjQueryの読み込みも忘れないようにします。

// JavaScriptの場合
const youtubeWindow = document.getElementById("youtube").contentWindow;

// jQueryの場合
const youtubeWindow = $("#youtube")[0].contentWindow;

// postMessageを送信する関数
function y_iframeController(action,arg=null){
    youtubeWindow.postMessage('{"event":"command", "func":"'+action+'", "args":'+arg+'}', '*');
};

// 一時停止ボタンを押した時のアクション（JavaScriptの場合）
document.getElementById('pause').addEventListener('click', function(){
    y_iframeController('pauseVideo');
});

// 一時停止ボタンを押した時のアクション（jQueryの場合）
$('#pause').on('click',function(){
    y_iframeController('pauseVideo');
});

動画と停止する

停止ボタンのHTMLはこちら。

<button id="stop">停止</button>

iframeで埋め込んだYouTube動画を操作するためのコードはこちら。
jQueryを使う場合はjQueryの読み込みも忘れないようにします。

// JavaScriptの場合
const youtubeWindow = document.getElementById("youtube").contentWindow;

// jQueryの場合
const youtubeWindow = $("#youtube")[0].contentWindow;

// postMessageを送信する関数
function y_iframeController(action,arg=null){
    youtubeWindow.postMessage('{"event":"command", "func":"'+action+'", "args":'+arg+'}', '*');
};

// 停止ボタンを押した時のアクション（JavaScriptの場合）
document.getElementById('stop').addEventListener('click', function(){
    y_iframeController('stopVideo');
});

// 停止ボタンを押した時のアクション（jQueryの場合）
$('#stop').on('click',function(){
    y_iframeController('stopVideo');
});

動画をクリアする

クリアボタンのHTMLはこちら。

<button id="clear">クリア</button>

iframeで埋め込んだYouTube動画を操作するためのコードはこちら。
jQueryを使う場合はjQueryの読み込みも忘れないようにします。

// JavaScriptの場合
const youtubeWindow = document.getElementById("youtube").contentWindow;

// jQueryの場合
const youtubeWindow = $("#youtube")[0].contentWindow;

// postMessageを送信する関数
function y_iframeController(action,arg=null){
    youtubeWindow.postMessage('{"event":"command", "func":"'+action+'", "args":'+arg+'}', '*');
};

// クリアボタンを押した時のアクション（JavaScriptの場合）
document.getElementById('clear').addEventListener('click', function(){
    y_iframeController('clearVideo');
});

// クリアボタンを押した時のアクション（jQueryの場合）
$('#clear').on('click',function(){
    y_iframeController('clearVideo');
});

シークバー移動する

シークバーとはYouTubeの再生位置を表す動画下部に表示されるバーのことです。シークバー移動することで動画の再生位置を指定することが出来ます。
再生位置は第2引数に数値で指定します。

シークバー移動するボタンのHTMLはこちら。

<button id="seek">シークバー移動</button>

iframeで埋め込んだYouTube動画を操作するためのコードはこちら。
jQueryを使う場合はjQueryの読み込みも忘れないようにします。

// JavaScriptの場合
const youtubeWindow = document.getElementById("youtube").contentWindow;

// jQueryの場合
const youtubeWindow = $("#youtube")[0].contentWindow;

// postMessageを送信する関数
function y_iframeController(action,arg=null){
    youtubeWindow.postMessage('{"event":"command", "func":"'+action+'", "args":'+arg+'}', '*');
};

// シークバー移動ボタンを押した時のアクション（JavaScriptの場合）
document.getElementById('seek').addEventListener('click', function(){
    //(secondsパラメータ : 指定の秒数の位置へ移動)
    y_iframeController('seekTo','[20]');
});

// シークバー移動ボタンを押した時のアクション（jQueryの場合）
$('#seek').on('click',function(){
    y_iframeController('seekTo','[20]');
});

ミュート（音声無し）設定する

ミュート（音声無し）ボタンのHTMLはこちら。

<button id="mute">ミュート（音声無し）</button>

iframeで埋め込んだYouTube動画を操作するためのコードはこちら。
jQueryを使う場合はjQueryの読み込みも忘れないようにします。

// JavaScriptの場合
const youtubeWindow = document.getElementById("youtube").contentWindow;

// jQueryの場合
const youtubeWindow = $("#youtube")[0].contentWindow;

// postMessageを送信する関数
function y_iframeController(action,arg=null){
    youtubeWindow.postMessage('{"event":"command", "func":"'+action+'", "args":'+arg+'}', '*');
};

// ミュートボタン（音声無し）を押した時のアクション（JavaScriptの場合）
document.getElementById('mute').addEventListener('click', function(){
    y_iframeController('mute');
});

// ミュートボタン（音声無し）を押した時のアクション（jQueryの場合）
$('#mute').on('click',function(){
    y_iframeController('mute');
});

アンミュート（音声あり）設定する

アンミュート（音声あり）ボタンのHTMLはこちら。

<button id="unmute">アンミュート（音声あり）</button>

iframeで埋め込んだYouTube動画を操作するためのコードはこちら。
jQueryを使う場合はjQueryの読み込みも忘れないようにします。

// JavaScriptの場合
const youtubeWindow = document.getElementById("youtube").contentWindow;

// jQueryの場合
const youtubeWindow = $("#youtube")[0].contentWindow;

// postMessageを送信する関数
function y_iframeController(action,arg=null){
    youtubeWindow.postMessage('{"event":"command", "func":"'+action+'", "args":'+arg+'}', '*');
};

// アンミュート（音声あり）ボタンを押した時のアクション（JavaScriptの場合）
document.getElementById('unmute').addEventListener('click', function(){
    y_iframeController('unMute');
});

// アンミュート（音声あり）ボタンを押した時のアクション（jQueryの場合）
$('#unmute').on('click',function(){
    y_iframeController('unMute');
});

動画の音量を設定する

音量を設定するボタンのHTMLはこちら。

<button id="volume">音量を設定</button>

iframeで埋め込んだYouTube動画を操作するためのコードはこちら。
jQueryを使う場合はjQueryの読み込みも忘れないようにします。

// JavaScriptの場合
const youtubeWindow = document.getElementById("youtube").contentWindow;

// jQueryの場合
const youtubeWindow = $("#youtube")[0].contentWindow;

// postMessageを送信する関数
function y_iframeController(action,arg=null){
    youtubeWindow.postMessage('{"event":"command", "func":"'+action+'", "args":'+arg+'}', '*');
};

// 音量を設定ボタンを押した時のアクション（JavaScriptの場合）
document.getElementById('volume').addEventListener('click', function(){
    y_iframeController('setVolume','[50]');
});

// 音量を設定ボタンを押した時のアクション（jQueryの場合）
$('#volume').on('click',function(){
    y_iframeController('setVolume','[50]');
});

音量は0～100の整数値で第2引数に指定します。

コードまとめ

JavaScriptのコードまとめ

JavaScriptのコード全体はこちら。コピペで使用することが出来ます。

const youtubeWindow = document.getElementById("youtube").contentWindow;

// postMessageを送信する関数
function y_iframeController(action,arg=null){
    youtubeWindow.postMessage('{"event":"command", "func":"'+action+'", "args":'+arg+'}', '*');
};


// 再生ボタンを押した時のアクション
document.getElementById('play').addEventListener('click', function(){
    y_iframeController('playVideo');
});

// 一時停止ボタンを押した時のアクション
document.getElementById('play').addEventListener('click', function(){
    y_iframeController('playVideo');
});

// 停止ボタンを押した時のアクション
document.getElementById('stop').addEventListener('click', function(){
    y_iframeController('stopVideo');
});

// クリアボタンを押した時のアクション
document.getElementById('clear').addEventListener('click', function(){
    y_iframeController('clearVideo');
});

// シークバー移動ボタンを押した時のアクション
document.getElementById('seek').addEventListener('click', function(){
    //(secondsパラメータ : 指定の秒数の位置へ移動)
    y_iframeController('seekTo','[20]');
});

// ミュートボタン（音声無し）を押した時のアクション
document.getElementById('mute').addEventListener('click', function(){
    y_iframeController('mute');
});

// アンミュート（音声あり）ボタンを押した時のアクション
document.getElementById('unmute').addEventListener('click', function(){
    y_iframeController('unMute');
});

// 音量を設定ボタンを押した時のアクション
document.getElementById('volume').addEventListener('click', function(){
    y_iframeController('setVolume','[50]');
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

jQueryのコードまとめ

jQueryのコード全体はこちら。コピペで使用することが出来ます。

const youtubeWindow = $("#youtube")[0].contentWindow;

// postMessageを送信する関数
function y_iframeController(action,arg=null){
    youtubeWindow.postMessage('{"event":"command", "func":"'+action+'", "args":'+arg+'}', '*');
};


// 再生ボタンを押した時のアクション
$('#play').on('click',function(){
    y_iframeController('playVideo');
});

// 一時停止ボタンを押した時のアクション
$('#pause').on('click',function(){
    y_iframeController('pauseVideo');
});

// 停止ボタンを押した時のアクション
$('#stop').on('click',function(){
    y_iframeController('stopVideo');
});

// クリアボタンを押した時のアクション
$('#clear').on('click',function(){
    y_iframeController('clearVideo');
});

// シークバー移動ボタンを押した時のアクション
$('#seek').on('click',function(){
    y_iframeController('seekTo','[20]');
});

// ミュートボタン（音声無し）を押した時のアクション
$('#mute').on('click',function(){
    y_iframeController('mute');
});

// アンミュート（音声あり）ボタンを押した時のアクション
$('#unmute').on('click',function(){
    y_iframeController('unMute');
});

// 音量を設定ボタンを押した時のアクション
$('#volume').on('click',function(){
    y_iframeController('setVolume','[50]');
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
iframeで埋め込んだYouTube動画は簡単に操作することが出来ますね。
今回はクリックした時に操作する方法をご紹介しましたが、スクロールしたタイミングで再生することでYouTubeアプリのような使い方を作ることも出来ます。
無限の可能性を秘めたこのYouTube動画の操作を是非使ってみて下さい。