4つ並びのリストになっているiframeで埋め込まれた動画をクリックすると、その場所でiframeは再生されず(動作せず)、上の大きいところで選択したyoutubeが再生されるようにしたいです。
html
1<ul class="chapter"> 2<li class="movie1"><a href="http://www.youtube.com/embed/Bk3b5Yxpg5Y?rel=0&autoplay=1" video="Bk3b5Yxpg5Y">youtube1</a></li> 3<li class="movie2"><a href="http://www.youtube.com/embed/NXEHNs-A13g?rel=0&autoplay=1" video="NXEHNs-A13g">youtube</a></li> 4<li class="movie3"><a href="http://www.youtube.com/embed/tOombs9YrRA?rel=0&autoplay=1" video="tOombs9YrRA">youtube1</a></li> 5<li class="movie4"><a href="http://www.youtube.com/embed/FRIj3loBNjk?rel=0&autoplay=1" video="FRIj3loBNjk">youtube1</a></li> 6</ul>
html
1<div class="movie"> 2<div id="mMovieWrap_Sp"> 3<div id="mMovieWrap"> 4<div id="mMovie"> 5<div class="cover"></div> 6<div id="video1"></div> 7</div> 8<div id="playerarea"> 9<div id="video2"></div> 10</div> 11</div> 12</div> 13<div> 14<ul class="chapter"> 15<li class="movie1"><a href="http://www.youtube.com/embed/Bk3b5Yxpg5Y?rel=0&autoplay=1" video="Bk3b5Yxpg5Y"><iframe width="560" height="315" src="https://www.youtube.com/embed/Bk3b5Yxpg5Y" frameborder="0"></iframe></a></li> 16<li class="movie2"><a href="http://www.youtube.com/embed/NXEHNs-A13g?rel=0&autoplay=1" video="NXEHNs-A13g"><iframe width="560" height="315" src="https://www.youtube.com/embed/NXEHNs-A13g" frameborder="0"></iframe></a></li> 17<li class="movie3"><a href="http://www.youtube.com/embed/tOombs9YrRA?rel=0&autoplay=1" video="tOombs9YrRA"><iframe width="560" height="315" src="https://www.youtube.com/embed/tOombs9YrRA" frameborder="0"></iframe></a></li> 18<li class="movie4"><a href="http://www.youtube.com/embed/FRIj3loBNjk?rel=0&autoplay=1" video="FRIj3loBNjk"><iframe width="560" height="315" src="https://www.youtube.com/embed/FRIj3loBNjk" frameborder="0"></iframe></a></li> 19</ul> 20</div> 21</div>
javascript
1 2 var tag = document.createElement('script'); 3 tag.src = "http://www.youtube.com/iframe_api/"; 4 var firstScriptTag = document.getElementsByTagName('script')[0]; 5 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 6 7// 再生準備を行います。 8 var player; 9 function onYouTubeIframeAPIReady() { 10 player = new YT.Player('video1', { 11 videoId: 'Bk3b5Yxpg5Y', 12 playerVars: {'autoplay': 0, 'controls': 1, 'rel': 0, 'showinfo':0, 'loop': 0,'wmode':'opaque'}, 13 }); 14 } 15 16// 呼び出されます。 17 18 $(function() { 19 $('#mMovie .cover').on('click', function() { 20 $('.chapter li.movie1 a').addClass('active'); 21 $('.chapter li.movie1 a').find('img').attr('src', $('.chapter li.movie1 a').find('img').attr('src').replace('.jpg', '_ov.jpg')); 22 23 $(this).css('display','none'); 24 player.seekTo(0); 25 player.playVideo(); 26 }); 27 28 function chapterC(){ 29 $('.chapter li a').click(function() { 30 var self = $(this); 31 player.pauseVideo(); 32 var nowVideo=$(this).attr('video'); 33 $('#mMovie').css({'display':'none'}); 34 35 $('#video2').html(''); 36 $('#video2').append('<iframe src="//www.youtube.com/embed/' + nowVideo + '?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>'); 37 }); 38 }; 39 40 chapterC(); 41 }); 42 43 44 45 46 47 $(function() { 48 $('.movie').find('a').attr('href', 'javascript:void(0)'); 49});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/27 21:50
2018/02/28 00:06