JSFiddle - React, Tailwind, and code Playground

by Alee

HTML

<div class="thumbnails">
    <div>
        <a href="#" id="showvid1" ><img src="http://i.imgur.com/fFcq0.jpg" /></a>
        <a href="#" id="showvid2" ><img src="http://i.imgur.com/r54R8.jpg" /></a> 
    </div>
    <div>
        <a href="#" id="showvid3">
            <img src="http://i.imgur.com/ZFzo3.jpg" id="showvid3"/> </a>
        <a href="#" id="showvid4">
            <img src="http://i.imgur.com/Hj7H9.jpg" id="showvid4" /></a>
    </div>
</div>

<div class="videos">
    
<div id="vid1" class="vidframe" >
    <iframe width="480" height="390" src="http://www.youtube.com/embed/afGkv0IT4dU" frameborder="0" allowfullscreen></iframe>
</div>

<div id="vid2" class="vidframe">        
    <iframe width="480" height="390" src="http://www.youtube.com/embed/oCFWVocrnDA" frameborder="0" allowfullscreen></iframe>
</div>

<div id="vid3" class="vidframe">    
    <iframe width="480" height="390" src="http://www.youtube.com/embed/imS6H1JAkGY" frameborder="0" allowfullscreen></iframe>
</div>      

<div id="vid4" class="vidframe">                
    <iframe width="480" height="390" src="http://www.youtube.com/embed/ICsgjqVvtM0" frameborder="0" allowfullscreen></iframe>
</div>    

</div>

CSS

.videos {
    width: 480;
    float: left;
}

.thumbnails {
    width: 260;
    float: left;
    
}

.vidframe{
    display:none;
}

JavaScript

$(document).ready(function () {
            $('.vidframe').hide();

            
            $('a').click(function () {
                $('.vidframe').hide();
                $('#'+this.id.substr(4)).toggle(400);
            });
                    
            
            
        });