JSFiddle - React, Tailwind, and code Playground

by franverona

HTML

<div id="video">
    <object width="560" height="315">
        <param name="movie" value="http://www.youtube.com/v/3M4acwNv8nc?version=3&amp;hl=es_ES"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/3M4acwNv8nc?version=3&amp;hl=es_ES" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
    </object>
</div>
<div id="cinema-div">
    <input id="cinema-button" type="button" value="Cinema mode" />
</div>

JavaScript

function overlayed(element) {

    var $self = jQuery(element),
        $body = jQuery('body'),
        bh = $body.height()+'px',
        overlay = ['<div class="jquery-cinema">',
            '</div>'];
    
    $body.prepend(overlay.join(""));

    jQuery('.jquery-cinema').css({
        'height': bh,
            'position': 'absolute',
            'top': '0px',
            'left': '0px',
            'width': '100%',
            'z-index': '4000',
            'background-color': 'rgb(0, 0, 0)',
            'opacity': '0.9',
        'display': 'none'
    });

    $self.css({
        'position': 'relative',
            'z-index': '5000'
    });
    
    jQuery('.jquery-cinema').fadeIn(500);

    // Remove the overlay on click
    jQuery('.jquery-cinema').click(function () {
        jQuery(this).fadeOut(500, function(){
                        jQuery(this).remove();
                    });
    });
}

$('#cinema-button').click(function () {
    overlayed($('#video'));
});