WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

YouTube動画の切替え

ボタンを押した時に複数の動画をJavaScriptで切り替える

HTML

<div class="movie">
  <ul class="movie__nav clearfix">
    <li class="movie__select" id="vkSCLvIaCcI">動画1</li>
    <li class="movie__select" id="bto1GpdAKEA">動画2</li>
  </ul>
  <div class="cast__movie">
    <a target="_blank" href="https://www.youtube.com/watch?v=vkSCLvIaCcI">
      <div class="movie__thumbnail"><img src="http://i.ytimg.com/vi/vkSCLvIaCcI/maxresdefault.jpg" width="750" height="442" alt=""></div>
    </a>
  </div>
</div>

JS

$(function(){
  $('.movie__nav li').on('click',function(){
    $('.movie__nav li').removeClass('movie__select');
    $(this).addClass('movie__select');
    var movieid = $(this).attr('id');
    $('.cast__movie a').attr('href', 'https://www.youtube.com/watch?v=' + movieid);
    $('.movie__thumbnail img').attr('src','http://i.ytimg.com/vi/'+ movieid + '/maxresdefault.jpg');
  });
});