JSFiddle - React, Tailwind, and code Playground

by Max Zima

HTML

<div id="ddd">
    <div id="display"></div>
    <canvas></canvas>
    <video preload="auto" autoplay id="introVideo" webkit-playsinline="1" wmode="opaque" width="774" height="400">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
        Uw browser ondersteunt geen html5 video
    </video>
    <div id="play">Play</div>
</div>

CSS

video{
     -webkit-filter: brightness(108.5%); 
    width: 600px;
    height: 400px;
}

#ddd {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: auto;
}

#display {
    position: absolute;
    width: 600px;
    height: 400px;
    top:0;
    left:0;
    background: #ddd;
    z-index: 44;
}

/* #introVideo {
    display:none;
} */

#play {
    posotion: absolute;
    z-index: 50;
    top: 100px;
    left: 100px;
    width: 250px;
    height: 250px;
    background: grey;
}

canvas {
    position: absolute;
    width: 600px;
    height: 400px;
    top:0;
    left:0;
}

JavaScript

$(document).on('click', '#play', function() {
    $('#display').hide();
    $('canvas').hide()
	var $v2 = $video = $(this).closest('#ddd').find('video');
	//$v2 = $video.clone();
    //$video.replaceWith($v2);
	$v2.get(0).play();
	$v2.show();
});