JSFiddle - React, Tailwind, and code Playground

by Jack Stauber

HTML

<body>
    <img src="http://www.jach.hawaii.edu/~hps/clipart/Lines/Dividers/BLULINE.GIF" width=100%>
    <table align=center>
        <tr><td>
            <h3 align=center><img src="http://www.jach.hawaii.edu/~hps/clipart/Multimedia/film02.gif">  Jack Stauber Films Online <img src="http://www.jach.hawaii.edu/~hps/clipart/Multimedia/film02.gif"></h3>
            </td></tr>
    </table>
    <p><img src=http://www.jach.hawaii.edu/~hps/clipart/Bullets/Squares/blue.gif>
        I'm a Teenager  (2014)
    </p>  
        <div>
   <!--Remember to insert links to various other pages HERE-->
           
            <div class=bob><br><img src="http://oi62.tinypic.com/29nz6hl.jpg" height=200px width=290px><br><i><strong>Starring:</strong> Justin Danylko</i><br>
                
                  <img src="http://oi61.tinypic.com/2dcbyq1.jpg" height=200px width=290px><br> 
                      <i><strong>Filmed with:</strong> Hi-8 Camcorder</i><br>
                    <img src="http://oi59.tinypic.com/29qcp6s.jpg" height=200px width=290px><br>
                        Watch the trailer <a href="https://www.youtube.com/watch?v=STSeOYbC8Lw">HERE</a><br> (<i>right-click and open in new tab</i>)
                </div>
        </div>
    <p><img src=http://www.jach.hawaii.edu/~hps/clipart/Bullets/Squares/blue.gif>
        Jabón (2013)
    </p>
        <div>
            <div class=bob><br><img src="http://oi60.tinypic.com/b5kun8.jpg" height=160px width=290px><br><i><strong>Co-Written by:</strong> Spencer Roeback</i><br>
                
                  <img src="http://oi59.tinypic.com/25frogl.jpg" height=165px width=290px><br> 
                     <i><strong>Language:</strong> Español</i><br>
                    <img src="http://oi60.tinypic.com/r2nthe.jpg" height=165px width=290px><br>
                        <i><strong>Winner of La Telenovela Festivale</strong> 1st Placement</i><br>
                        <img src="http://oi58.tinypic.com/21djr00.jpg" height=165px...

CSS

body {
    background-color: black;
    
background-image:url('http://www.jach.hawaii.edu/~hps/clipart/Backgrounds/Misc/1u.gif');
background-repeat:repeat;
}
h3 {
    font-family:Garamond;
    color:white;
    text-shadow: 2px 4px #000000;
    padding-top:0px;
    display: table;
    margin: 0 auto;
    font-size: 33px;
    
}
table {
    background-image:url('http://www.jach.hawaii.edu/~hps/clipart/Backgrounds/Misc/textur1.gif');
background-repeat:repeat;
    color: midnightblue;
   border: 5px outset blue; 
   width:500px;
    height:50px;
}

p{
    color:white;
    text-shadow: 1px 2px #000000;
    background-image:url('http://www.jach.hawaii.edu/~hps/clipart/Backgrounds/Misc/textur1.gif');
    padding-left: 14px;
     
   border: 5px outset blue; 
    margin-right:50%;
   
    
}
div {
    font-size:12px;
    color:black;
    text-shadow: 1px 1px #D8D8D8;
    border: 5px blue groove;
    background-image:url('http://www.jach.hawaii.edu/~hps/clipart/Backgrounds/72X72/back6.gif');
    margin-right:52%;
    margin-left:3%;
    padding-left:5px;
}
.bob{
    padding-left=10px;
    font-size:12px;
    color:black;
    text-shadow: 1px 1px #D8D8D8;
    border: none;
    background-image:url('http://www.jach.hawaii.edu/~hps/clipart/Backgrounds/72X72/back6.gif');
    margin-right:22%;
    margin-left:7%;
}
}

JavaScript

function ($) {
  $(document).ready(function(){
    $('a[href*=youtube]').each(function () {
        // convert youtube swf href to embed for iframe
        var thisHref = this.href.replace(new RegExp("watch\\?v=", "i"), 'embed/');
        // bind fancybox to each anchor
        $(this).fancybox({
            "padding": 0,
            "type": 'iframe',
            // add trailing parameters to href (wmode) AND autoplay    
            "href" : thisHref+"?wmode=opaque&amp;autoplay=1"
        }); // fancybox
    }); // each
  }); // ready
})(jQuery);