JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<div id="videotop">
 <?php query_posts('category_name=video&posts_per_page=6'); ?>
        <h2>Latest Videos - <em>music videos, interviews and features</em></h2>
  <?php while (have_posts()) : the_post(); ?>
                        <article id="post-<?php the_ID(); ?>" class="homevideo">
                        <h2><a href="#" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                        <div class="entry-content-video">
                
            <a class="loadvideo" id="<?php echo get_post_meta($post->ID, 'youtubeID', true) ?>" href="#" class="thumb">
                        <img src="http://img.youtube.com/vi/<?php echo get_post_meta($post->ID, 'youtubeID', true) ?>/default.jpg"></a>
                        </div>
            
                                </article>
        <?php endwhile; ?>
<div class="videocontainer">
    
</div>
    <a href="#" class="videoclose">Close</a>
</div>

CSS

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

a.videoclose {
        width:100%;
        float:left;
        background:#168E4C;
        color:#fff;
        text-shadow:1px 1px 1px #0f3e24;
        text-decoration:none;
        text-align:center;
        padding-top:8px;
        padding-bottom:8px; 
        display:none;
}

JavaScript

$(document).ready(function(){
$(".loadvideo").click(function(e){
var youtubeID=$(this).attr("id");
$(".videocontainer").empty().fadeOut("slow");
$(".videoclose").show();
$(".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();
});
$(".videoclose").click(function(e){
$(".videocontainer").empty().fadeOut("slow"); 
   $(".videoclose").hide(); 
          e.preventDefault();  
});    
});