ホームページの制作や運営サポートのご相談はデジフィーへ
YouTubeをサイトに貼るときのカスタマイズ方法についていくつか書いてみました。
下記サイトで実装した例を元に書いています。
http://dqsdrums.com/
前回は、YouTubeの共有で自動生成されたソースコードのパラメータを触ってカスタマイズしましたが、ページが開いたときに音量をミュートさせることができませんでした。
いきなり動画が再生されて音がなるのは、嫌がる人も多いので何とかミュートさせたいということで、前回のブログに書いた
2.Javascriptを使ったAPIを使用する方法
を使って音量をミュートさせたいと思います。
YouTubeが提供しているiframe_apiというAPIのようですが、下記のJavaScriptのソースコードをYouTubeが表示される部分よりも下に貼ります。個人的には、footerの下あたりに貼りました。
<script>
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', {
height: '503',
width: '894',
videoId: 'iCD-7zn2-gs',
wmode: 'transparent',
playerVars:{
'loop': '1',
'playlist': 'iCD-7zn2-gs',
'rel': '0',
'showinfo': '0',
'color': 'white',
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
event.target.mute();
}
function onPlayerStateChange(event) {
}
</script>
そして、YouTubeを貼りたいところに、下記htmlを貼ります。
<div id="player"></div>
中が空っぽのdivタグですが、この部分に自動的にYouTubeが入るようになっています。
この自動的に入るという部分にしばらく気がつきませんでした。
以上を解説しますと、JavaScriptの方の7行目「var player」恐らくこのあたりが、htmlのdivタグのidをplayerとさせているのだと思います。
次に、JavaScriptのパラメータですが、下記の通りです。
| width | 動画の横幅 |
| height | 動画の縦幅 |
| videoID | YouTubeの共有URLの後半部分のIDを入れます。 http://youtu.be/iCD-7zn2-gs |
| wmode | YouTubeをz-indexで制御する際必要なようですが、とりあえずtranceparentにしておいいてください。 |
| loop | 0にすると動画がループしない、1にするとループします。ただし、下記playlistの表記が必要 |
| playlist | videoIDの時のIdをカンマ区切りで書くと動画が順番に再生されます。ループを使うには、動画1枚でも、表記が必要 |
| rel | 0で関連動画を非表示、1で表示 |
| showinfo | 0で画面上部のタイトル等を非表示、、1で表示。 |
| color | YouTubeのシークバーの色を変更できます。whiteで白色にしてみました。他にdark,light,redがあり。 |
loopをする際に、paylistの設定がいるのは最初気づきませんでした。パラメータは他にもありますので、下記サイトなどを参考にしてください。
https://developers.google.com/youtube/iframe_api_reference?hl=ja
最後に音量のミュートですが、イベントハンドラ「onPlayerReady(event)」にevent.target.mute();を追記すると出来上がりです。
Flashで大きな動画を再生して見てもらうのがやりにくくなった昨今、YouTubeの自動再生を利用するのがありなのかなと思いました。
YouTubeを画面いっぱいに再生しているサイトの例（音量はミュートされていないので注意！）
http://www.blur.co.uk/