JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<link rel="stylesheet" href="http://www.maxumi.co.uk/wp-content/themes/maxumi/css/maxumi-style.css">
<link rel="stylesheet" href="http://www.maxumi.co.uk/wp-content/themes/maxumi/style.css">
<section id="featured_video">

<a href="#" class="loadvideo topvideo" id="TsrNkWz8ybc">
<img src="http://img.youtube.com/vi/TsrNkWz8ybc/default.jpg"></a>
<a href="#" class="loadvideo" id="NlUq78cibek">
<img src="http://img.youtube.com/vi/NlUq78cibek/default.jpg"></a>
<a href="#" class="loadvideo" id="7qaxw7kIVd8">
<img src="http://img.youtube.com/vi/7qaxw7kIVd8/default.jpg"></a>
<a href="#" class="loadvideo" id="c5695fKfgvQ">
<img src="http://img.youtube.com/vi/c5695fKfgvQ/default.jpg"></a>
<div class="videocontainer">
    
</div>

</section>

CSS

a.loadvideo {  
float:left;
}  

a.loadvideo img {
width:120px;
border-right:5px solid black;  
}

.videocontainer {
 padding-top:0;
float:left; 
display:none;
background: rgb(0,0,0);
}

section#featured_video {
float:left;
width:940px; 
padding:10px;

}

JavaScript

$(document).ready(function(){
$(".loadvideo").click(function(e){
var youtubeID=$(this).attr("id");
$(".videocontainer").empty().fadeOut("slow");
$(".videocontainer").append("<object width='940' height='450'><param name='movie' value='http://www.youtube.com/v/+youtubeID+&rel=1'></param><param name='wmode' value='transparent'></param><embed src='http://www.youtube.com/v/"+youtubeID+"&rel=1' type='application/x-shockwave-flash' wmode='transparent' width='940' height='450'></embed></object>").slideDown("slow");

    e.preventDefault();
});
    
});