JSFiddle - React, Tailwind, and code Playground

by Tim Peterson

HTML

<div class="icon" data-id="1" >cadillac</div>
<div class="icon" data-id="2">nike</div>
<div class="icon" data-id="3">cheerios</div>

<div class="video" data-id="1" >
<video class="video" width="50%" height="50%"  controls="controls" poster="http://www.birds.com/wp-content/uploads/home/bird.jpg" >    
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
</video>
</div>

<div class="video" data-id="2" >
<video class="video" width="50%" height="50%"  controls="controls" poster="http://www.logobird.com/wp-content/uploads/2011/03/new-google-chrome-logo.jpg">
<source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4" />
</video>
</div>

<div class="video" data-id="3" >
<video class="video" width="50%" height="50%"  controls="controls" poster="http://cheerioscoupons.info/wp-content/uploads/_Cheerios-Coupons-1-300x283.jpg">
<source src="http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.mp4" type="video/mp4" />
</video>
</div>

JavaScript

$('div.video').hide();

$('.icon').click(function(){
    var id=$(this).data('id'),
        thisDiv=$("div.video[data-id='" + id +"']"),
        thisVideo=$("div.video[data-id='" + id +"']").find('video');
  
       $('div.video').not(thisDiv).fadeOut();
       $('video').not(thisVideo).get(0).pause();
       $('video').not(thisVideo).get(0).currentTime = 0;
       thisDiv.fadeIn();      
       thisVideo.get(0).play();   
});