JSFiddle - React, Tailwind, and code Playground

by teknoblogo

HTML

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<link rel="stylesheet" href="http://static.flowplayer.org/tools/css/standalone.css">
<link rel="stylesheet" href="http://static.flowplayer.org/tools/css/overlay-basic.css">
<div id="triggers">
    <img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" rel="#mies1"/>

<!-- overlays -->
<div class="simple_overlay" id="mies1">
    <iframe title="YouTube video player" width="960" height="750" src="http://www.youtube.com/embed/1JHlY7gxdXE?rel=0&amp;hd=1" frameborder="0" allowfullscreen></iframe>


    <div class="details">
        <h3>Girmiyor.Com Tanıtım Videosu</h3>
    </div>
</div>

CSS

/* some styling for triggers */
    #triggers {
        text-align:center;
    }
    
    #triggers img {
        cursor:pointer;
        margin:0 5px;
        background-color:#fff;
        border:1px solid #ccc;
        padding:2px;
    
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        
    }
    
    
    
    /* styling for elements inside overlay */
    .details {
        margin : 20px auto;
        font-size:11px;
        color:#fff;
        width:150px;
    }
    
    .details h3 {
        color:#aba;
        font-size:15px;
        margin:0 0 -10px 0;
    }

JavaScript

$(document).ready(function() {
$("img[rel]").overlay();
});