同一ページ内に複数のYouTubeを埋め込むと、ページの読み込みが重くなってしまいます。
その対応として、初期表示はサムネイル画像を表示して、サムネイルをクリック後にYouTubeを埋め込むようにしてみます。
サンプルコード
HTML
#sample1～#sample3にサムネイル画像が入ります。
1 2 3 4 5 6 7 8 9 10 11 | <div id="contents"> <div class="ytBox"> <div id="sample1"></div> </div> <div class="ytBox"> <div id="sample2"></div> </div> <div class="ytBox"> <div id="sample3"></div> </div></div> |
CSS
サムネイル画像にオンマウス時にカーソルが変わるようにしておきます。
1 2 3 | .ytBox img { cursor: pointer;} |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | var tag = document.createElement('script');var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);// 各プレーヤーの格納var ytPlayer = [];// プレーヤーのサイズvar ytWidth = 640;var ytHeight = 480;// 各動画情報var ytData = [ { id: 'TSbSzrLffew', area: 'sample1' }, { id: 'fQ_m5VLhqNg', area: 'sample2' }, { id: 'p3ih4rDduug', area: 'sample3' }];// サムネイルの埋め込みfunction onYouTubeIframeAPIReady() { for(var i = 0; i < ytData.length; i++) { // サムネイルの埋め込み document.getElementById(ytData[i]['area']).innerHTML = '<img id="yt-thumb' + i + '" src="http://i.ytimg.com/vi/' + ytData[i]['id'] + '/sddefault.jpg">'; // 埋め込んだサムネイルにイベント追加 ytEmbedding(i); }}// プレーヤーの埋め込みfunction ytEmbedding(i) { document.getElementById('yt-thumb' + i).addEventListener('click', function() { ytPlayer[i] = new YT.Player(ytData[i]['area'], { width: ytWidth, height: ytHeight, videoId: ytData[i]['id'], playerVars: { rel: 0 }, events: { 'onReady': onPlayerReady } }); });}// プレーヤー読み込み後の処理function onPlayerReady(e) { e.target.playVideo();} |
コメントが承認されるまで時間がかかります。