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">

          <div class="graphic_textbox_style_default" style="height: 335px; left: 483px; position: absolute; top: 140px; width: 236px; z-index: 1; " id="id3">
            <div>
              <div class="graphic_textbox_layout_style_default">
                <div id="thumbnails_div" class="paragraph Body_Medium" style="line-height: 20px; padding-bottom: 0pt; padding-top: 0pt;background-color:#efefef; "><table id="page_1">

                <tr><td><img id="56US0AthZu0" src="http://img.youtube.com/vi/56US0AthZu0/default.jpg" /></td><td>Bud Bud<BR>@23 oct 07<BR>(Part 1)</td></tr>
                <tr><td><img id="E-WiNUhuaKI" src="http://img.youtube.com/vi/E-WiNUhuaKI/default.jpg" /></td><td>Bud Bud<BR>@23 oct 07<BR>(Part 2)</td></tr>
                <tr><td><img id="e_V2VEFIvYQ" src="http://img.youtube.com/vi/e_V2VEFIvYQ/default.jpg" /></td><td>Bud Bud<BR>@23 oct 07<BR>(Part 3)</td></tr>
<tr><td><img id="eioQYVp9oLU" src="http://img.youtube.com/vi/eioQYVp9oLU/default.jpg" /></td><td>Bud Bud<BR>@29 oct 07</td></tr>
<tr><td><img id="FznNIYBrQtI" src="http://img.youtube.com/vi/FznNIYBrQtI/default.jpg" /></td><td>Bud Bud<BR>@31 oct 07<BR>(Part 1)</td></tr>

<tr><td></td><td><a id="a_page_2" style="text-align:right;">Page 2</a></td></tr>
 
</table>

<table id="page_2">

<tr><td><img id="9VAv8xVjgFo" src="http://img.youtube.com/vi/9VAv8xVjgFo/default.jpg" /></td><td>Bud Bud<BR>@13 Nov 07<BR>(Part 1)</td></tr>
<tr><td><img id="V2q8SRs1Drk" src="http://img.youtube.com/vi/V2q8SRs1Drk/default.jpg" /></td><td>Bud Bud<BR>@13 Nov 07<BR>(Part 2)</td></tr>
<tr><td><img id="4CmqVABcsSc" src="http://img.youtube.com/vi/4CmqVABcsSc/default.jpg" /></td><td>Bud Bud<BR>@20 Nov 07</td></tr>
<tr><td><img id="thM1gHi9FrE" src="http://img.youtube.com/vi/thM1gHi9FrE/default.jpg" /></td><td>Bud Bud<BR>@21...

CSS

#load {  
    display: none;  
    position: absolute;  
    right: 10px;  
    top: 10px;  
    background: url(images/ajax-loader.gif);  
    width: 43px;  
    height: 11px;  
    text-indent: -9999em;  
}

JavaScript

$(document).ready(function(){
$("#thumbnails_div img").click(function(){
var youtubeID=$(this).attr("id");
$("#show_div").empty();
$("#show_div").append("<object width='425' height='355'><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='425' height='355'></embed></object>");
});
});