【js】サイトに埋め込んだYouTubeの一時停止ボタンをiframe外で制御する方法

2017年11月30日

コーディングをしていて、サイト内にiframeでYouTubeを埋め込むことがあるかと思いますが、通常だとYoutube（iframe内）をクリックすると再生、停止ができる仕様になっており、例えばオリジナルで停止ボタンを作成しても同期することができません。

そんな時に、jsで下記の記述をすることでYouTubeの一時停止機能をオリジナルで作成した停止ボタンにも適用することができます！

コーダーであればHTML内にYouTubeを埋め込むことは必ずあるかと思うので、覚えておくといざという時に役立つかと思います！

【デモ】YouTubeの一時停止ボタンをiframe外で制御するサンプル

https://hiroyayabiku.github.io/Youtube—stopBtn/

スポンサードサーチ

ソースをダウンロード

https://github.com/HiroyaYabiku/Youtube—stopBtn

html

<div class="youtubeWrap">
<iframe class="video" id="popup-YouTube-player" width="560" height="315" src="https://www.youtube.com/embed/mh9IMIQmygE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<div class="youtube__closeBtn"><img src="./img/close.png" alt=""></div>
</div>

</div>

js

(function(){
var CloseTrigger = function(el){
var $video = $('.video-stream');
$(el).on('click', function() {
console.log('success')
videoControl("pauseVideo");
});
function videoControl(action){
var $playerWindow = $('#popup-YouTube-player')[0].contentWindow;
$playerWindow.postMessage('{"event":"command","func":"'+action+'","args":""}', '*');
}
};
var closeBtnClick = new CloseTrigger('.youtube__closeBtn');
})();

(function(){

var CloseTrigger = function(el){

var $video = $('.video-stream');

$(el).on('click', function() {

console.log('success')

videoControl("pauseVideo");

});

function videoControl(action){

var $playerWindow = $('#popup-YouTube-player')[0].contentWindow;

$playerWindow.postMessage('{"event":"command","func":"'+action+'","args":""}', '*');

}

};

var closeBtnClick = new CloseTrigger('.youtube__closeBtn');

})();

ポイント！

通常の埋め込みソース

<iframe class="video" id="popup-YouTube-player" width="560" height="315" src="https://www.youtube.com/embed/mh9IMIQmygE" frameborder="0" allowfullscreen></iframe>

1	<iframe class="video" id="popup-YouTube-player" width="560" height="315" src="https://www.youtube.com/embed/mh9IMIQmygE" frameborder="0" allowfullscreen></iframe>

一時停止ボタンをiframe外で制御する場合のソース

<iframe class="video" id="popup-YouTube-player" width="560" height="315" src="https://www.youtube.com/embed/mh9IMIQmygE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

1	<iframe class="video" id="popup-YouTube-player" width="560" height="315" src="https://www.youtube.com/embed/mh9IMIQmygE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

実装のポイントですが、urlの末尾に?enablejsapi=1というパラメータを追加することでYoutubeのJavaScript APIを有効にすることができます。