How to achieve switching between 4 videos, so that when you click on one of them the main video changes?

.main_video iframe{ width:100%; } .video_item iframe{ width:100%; height:100px; } .row{ display: flex; flex-direction: row; } .video_item{ padding:0 20px; } 
  <div class="main_video"> <iframe src="https://www.youtube.com/embed/_pwdixReIZ4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> <div class="row"> <div class="video_item"> <iframe src="https://www.youtube.com/embed/_pwdixReIZ4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> <div class="video_item"> <iframe src="https://www.youtube.com/embed/_pwdixReIZ4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> <div class="video_item"> <iframe src="https://www.youtube.com/embed/_pwdixReIZ4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </div>

    1 answer 1

    I can offer this option

      var content; var maincontent; $('.video_item').click(function(){ $(this).addClass("video_inner_new"); maincontent = $('.main_video .video_inner').detach(); content = $(this).find(".video_inner").detach(); content.appendTo('.main_video'); maincontent.appendTo('.video_item.video_inner_new'); $(".video_item").removeClass("video_inner_new"); }); 
     .main_video iframe{ width:100%; } .video_item iframe{ width:100%; height:100px; pointer-events: none; } .row{ display: flex; flex-direction: row; } .video_item{ padding:0 20px; } 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main_video"> <div class="video_inner"> <iframe src="https://www.youtube.com/embed/_pwdixReIZ4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </div> <div class="row"> <div class="video_item"> <div class="video_inner"> <iframe src="https://www.youtube.com/embed/xpVfcZ0ZcFM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </div> <div class="video_item"> <div class="video_inner"> <iframe src="https://www.youtube.com/embed/x8D6jzHBgAI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </div> <div class="video_item"> <div class="video_inner"> <iframe src="https://www.youtube.com/embed/_pwdixReIZ4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </div> </div>