JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<header id="agvHeader">
    <img src="http://www.rs1.com.br/arquivos/agv-legendary-helmet.png" alt="" title=""/>
</header>


<div id="agvContent">
    <video id="agvVideo" autoplay="autoplay" muted="muted">
        <source src="http://blog.rs1.com.br/info/video/AGVPistaGP.avi" type="video/avi"/>        
        <source src="http://blog.rs1.com.br/info/video/AGVPistaGP.mp4" type="video/mp4"/>        
        <source src="http://blog.rs1.com.br/info/video/AGVPistaGP.3gp" type="video/3gp"/>        
    </video>
</div>

CSS

*{margin:0px auto; padding:0px;}

#agvHeader{
    padding:10px;
    height:auto;
    width:100%;
    float:left;
    background:#000;
    position:relative;
}

#agvHeader img{ margin:0px auto; display:block; max-height:100%; max-width:100%;}

#agvContent{
    height:auto;
    width:100%;
    float:left;
    background:#333;
}

video#agvVideo {
    top:250px;
    right: 0; 
    bottom: 0;
    max-width:100%;
    max-height:100%;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

JavaScript

$("#agvVideo").bind("ended", function() {
    $(this).hide("slow");    
    $("#helmets").show("slow");
    $("#skip").hide("slow");
});

$("#skip").click(function(){
    $(this).hide("slow"); 
    $("#agvVideo").hide("slow");    
    $("#helmets").show("slow");
});