YouTube Player APIの音声をオンオフ
埋め込んだ動画をクリックして、動画の音声を切り替えるやり方。
HTMLの読み込み箇所に要素を用意する
複数ページで違う動画を埋め込むために、ページごとに変数でYouTubeの動画IDを渡しています。
<script>var movieID = 'vOBI0WA9CcY';</script><!-- 良き場所に書いてね -->
<div class="bgmovie mute">
<div id="player"></div>
</div>JSで各種設定
//youtube 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', {
videoId: movieID,
playerVars: {
playsinline: 1,
autoplay: 1, // 自動再生
loop: 1, // ループ有効
iv_load_policy: 3, //動画アノテーションを表示しない
disablekb:1, //キーボード操作OFF
rel:0, //再生終了時に関連動画を表示しない
controls: 0, // コントロールバー非表示
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
event.target.playVideo();
}
//unmute
$('.bgmovie').click(function () {
if($(this).hasClass('mute')){
$(this).removeClass('mute');
player.unMute();
}else{
$(this).addClass('mute');
player.mute();
}
});
}CSSで調整
クリックするとmuteというクラスが付いたり外れたりするので、それに合わせてミュートアイコンを出しています。
.bgmovie.mute::after {
content: "";
display: block;
width: 1.5em;
height: 1.5em;
background: url(../images/common/icon_mute.svg) no-repeat;
background-size: contain;
position: absolute;
bottom: 10px;
right: 10px;
}参考
- YouTube Player API Reference for iframe Embeds | YouTube IFrame Player API | Google for Developers
https://developers.google.com/youtube/iframe_api_reference?hl=ja