###やろうとしていること
・Youtubeの動画IDが[% y_data.video_id %]の関数に入ってくる(複数個)ので、「動画を再生」のリンクは複数個になるが、
どれを押しても1つの関数で各々の動画が再生される様にしたい。
###やりたいこと
・今はJS内にYoutubeの動画のIDを直接記述しているが(videoId:'xxxxxxxx',)、
aタグのdata-video-idの変数の中身がvideoId:''に入る様にしたい。
###やってみたこと
・aタグは使用していますがページ遷移はしないため、GETなどで値を渡すことは出来ませんでした。
・今はaタグのID名で要素を取得し、js内の変数に入れられないか調べているところです。
###環境情報
・サーバー側:おそらくperl
※HTML内に使われているのは、テンプレートツールキット(Perlのフレームワーク)だと思います。
###HTML
html
1<div id="modal-content"> 2 <div class="inner"> 3 <div id="player"></div> 4 </div> 5</div> 6 7[% IF youtube -%] 8 <div class="youtubeMovie"> 9[% WHILE (y_data = youtube.next) -%] 10 <a id="modal-open" class="button-link" href="#" data-video-id="[% y_data.video_id %]">動画を再生</a> 11[% END -%] 12 </div> 13[% END -%]
###JS
javascript
1<script> 2$(function(){ 3 'use scrict'; 4 5 //プレイヤー変数 6 var player; 7 8 //オブジェクト生成 9 function youtubeAPIInit() { 10 var scriptTag = document.createElement('script'); 11 scriptTag.src = "https://www.youtube.com/iframe_api"; 12 var fsTag = document.getElementsByTagName('script')[0]; 13 fsTag.parentNode.insertBefore(scriptTag, fsTag); 14 window.onYouTubeIframeAPIReady = function(){ 15 player = new YT.Player('player', { 16 height:'540', 17 width:'960', 18 videoId:'xxxxxxxx', 19 playerVars:{ 20 autohide:1, 21 controls:1, 22 modestbranding:1, 23 iv_load_policy:3, 24 showinfo:1, 25 rel:0, 26 autoplay:1 27 }, 28 events: { 29 'onReady' : onPlayerReady, 30 'onStateChange': onPlayerStateChange 31 } 32 }); 33 }; 34 } 35 36 function onPlayerReady(event){ 37 event.target.playVideoAt(); 38 } 39 40 // プレーヤーの状態が変更されたとき 41 function onPlayerStateChange(event) { 42 // 現在のプレーヤーの状態を取得 43 var ytStatus = event.data; 44 // 再生終了したとき 45 if (ytStatus == YT.PlayerState.ENDED) { 46 $content.add($lay).fadeOut("fast",function(){ 47 $lay.remove(); 48 }); 49 } 50 } 51 52 //モーダル 53 var modal = {}, $lay, $content; 54 modal.inner = function() { 55 if($("#modal-overlay")[0]) return false; 56 $("body").append('<div id="modal-overlay"></div>'); 57 $lay = $("#modal-overlay"); 58 $content = $("#modal-content"); 59 $lay.fadeIn("slow"); 60 youtubeAPIInit(); 61 this.resize(); 62 $content.fadeIn("fast"); 63 $lay.unbind().click(function() { 64 player.stopVideo(); 65 $content.add($lay).fadeOut("fast",function(){ 66 $lay.remove(); 67 }); 68 }); 69 }; 70 71 //リサイズ処理 72 modal.resize = function(){ 73 var $winWidth = $(window).width(); 74 var $winHeight = $(window).height(); 75 var $contentOuterWidth = $("#modal-content").outerWidth(); 76 var $contentOuterHeight = $("#modal-content").outerHeight(); 77 $("#modal-content").css({ 78 "left": (($winWidth - $contentOuterWidth) / 2) + "px", 79 "top": (($winHeight - $contentOuterHeight) / 2) + "px" 80 }); 81 } 82 83 //クリック処理 84 $("#modal-open").click(function(){ 85 modal.inner(); 86 modal.resize(); 87 }); 88 $(window).resize(modal.resize); 89}); 90</script>
###追記
js初心者のため、これだけが調べてもなかなかやり方が分かりませんでした。
初歩的なことかもしてませんが、ご教示頂ければと思います。
回答1件
あなたの回答
tips
プレビュー