同じサイト内で1ページに1つずつYouTubeを表示させたいと考えています。
YouTube Player APIを使って動画を表示させていますが、
ページ毎にJSファイルを用意すると動画IDだけが違うほぼ同じ内容のJSファイルを複数用意することになってしまうため、1つのファイルにまとめて記述したいと考えています。
動画IDだけをページ毎に変更したいので、ページ内に特定のIDが含まれていたら動画IDを出し分ければいいかと思い下記のようにしてみましたがうまくいきませんでした。
JAVASCRIPT
1var tag = document.createElement('script'); 2tag.src = "https://www.youtube.com/iframe_api"; 3var firstScriptTag = document.getElementsByTagName('script')[0]; 4firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 5 6var ytPlayer; 7var ytArea = 'sample'; 8 9var playerReady = false; 10function onPlayerReady(event) { 11 playerReady = true; 12} 13 14$(window).on("load", function(){ 15 if(document.getElementById('sample01')) { 16 var sample_ID = 'GUAjyOUZoPM'; 17 } elseif(document.getElementById('sample02')) { 18 var sample_ID = 'DlpT6w6QiAM'; 19 } 20 21 function onYouTubeIframeAPIReady() { 22 ytPlayer = new YT.Player (ytArea, { 23 width: 640, 24 height: 390, 25 videoId: sample_ID, 26 playerVars: { 27 rel: 0, 28 autoplay: 0, 29 showinfo: 0, 30 }, 31 events: { 32 'onReady': onPlayerReady 33 } 34 }); 35 } 36 37 $(function() { 38 $('.ytBtn').click(function() { 39 if(playerReady) { 40 ytPlayer.playVideo(); 41 $(this).addClass('ytPlay'); 42 } 43 }); 44 }); 45});
HTML
1<div id="sample01" class="ytBtn"> 2<div id="sample"></div> 3</div>
どのようにしたらページ毎に動画IDを変更することができるでしょうか?
また、他にもっと良い動画の管理方法がございましたら教えていただけますと幸いです。
何卒よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/30 13:52