Switch video elements in gallery

See more:

Javascript

CSS

HTML

On a website I have a large main div which contains an embedded youtube video.

Below this main video I have three other small thumbnail sized videos.

So, a total of 4 videos, one of which is ready to play.


I want to be able to click on any one of the small thumbnail videos and have that video switch with the main video and then autoplay that video in the main video area.

I'm wondering what Javascript I can include to accompany the html below or whether there might be a better method using an unordered list and list items?

<div class="responsive-wrapper">
 <div class="responsive-container">
   <iframe src=""></iframe>
 </div>
</div>

<div class="video-list-wrapper" id="video-gallery"> 
 <div class="responsive-wrapper2">
  <div class="responsive-container">
   <iframe src=""></iframe>
  </div>
 </div>
 <div class="responsive-wrapper2">
  <div class="responsive-container">
   <iframe src=""></iframe>
  </div>
 </div>
 <div class="responsive-wrapper2">
  <div class="responsive-container">
   <iframe src=""></iframe>
  </div>
 </div>
</div>