JSFiddle - React, Tailwind, and code Playground

by teknoblogo

HTML

<script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css">
<a id="various5" href="http://www.youtube.com/embed/1JHlY7gxdXE?rel=0&amp;hd=1">Iframe (75% width and height)</a>

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

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 {
        position:absolute;
        font-size:11px;
        color:#fff;
        width:960px;
    }
    
    .details h3 {
        color:#aba;
        font-size:15px;
        margin:0 0 -10px 0;
    }

JavaScript

$("#various5").fancybox({
        'width'                : 960,
        'height'            : 750,
        'autoScale'         : false,
        'transitionIn'        : 'none',
        'transitionOut'        : 'none',
        'type'                : 'iframe'
    });