JSFiddle - React, Tailwind, and code Playground

by OwenMelbz

HTML

<script src="http://vjs.zencdn.net/4.0.4/video.js"></script>
<div id="wrapper">
    <video  id="big-video-vid_html5_api"
            preload="auto"
            autoplay=""
            src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
</div>

CSS

#wrapper {
    height: 470px;
    width: 320px;
    overflow: hidden;
}
video {
    position: absolute;
    top: 0;
    left: 0;
    width: 470px !important;
    height: 320px !important;
}

JavaScript

var altVid = [{
    type: "video/mp4",
    src: "http://www.w3schools.com/html/movie.mp4"
}, {
    type: "video/webm",
    src: "http://www.w3schools.com/html/movie.webm"
}];

bgVid = _V_("big-video-vid_html5_api");

$("#wrapper").click(function () {

    $('#big-video-vid_html5_api video').eq(0)
        .clone().appendTo('#wrapper')
        .attr("id", "videoCopy")
        .css('opacity', 0);


   var tempVid = $("videoCopy");


        tempVid.play();
        $('#videoCopy').css('opacity', 1);
        bgVid.src(altVid);


        bgVid.on("loadedalldata", function () {
            bgVid.play();
            $('#videoCopy').remove();
        });












});