Youtubeの埋め込みでミュート状態で埋め込みしたい
Youtubeの動画をホームページやブログに埋め込んで動画を自動再生させたい場合に、できればミュート状態で埋め込みたいですよね。ミュートしておかないと、ユーザーが訪問した際に唐突に動画が流れるので音量調整の手間がかかってしまいます。
しかし、Youtubeの動画は普通に埋め込んだのではミュートが効かないので、この記事ではYoutubeの埋め込みでミュート状態で埋め込みする方法を説明していきます。
Youtubeの埋め込みでミュート状態で埋め込みする方法
それでは、Youtubeの埋め込みでミュート状態で埋め込みする方法を説明します。Youtubeの埋め込みでミュート状態にしたい場合には、下記のHTMLとJavaScriptを用いましょう。
<div class="youtube-area"> <div id="youtube"></div> </div> </pre>
// YouTubeのiframe 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);
// YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'youtube',
{
videoId: 'xxxxxxxx', // YouTubeのvideoIdを入力
playerVars: {
loop: 0, // ループさせない
controls: 1, // コントローラー表示
autoplay: 0, // 自動再生オフ
rel: 0, // オススメ動画を表示させない
showinfo: 1 // タイトル表示
},
events: {
'onReady': onPlayerReady
}
}
);
}
function onPlayerReady(event) {
event.target.setVolume(0);
}