JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>  
        <title>Projecto Aurora</title>  
    <body>
        <img src="http://s32.postimg.org/t78dw1h1h/Fundo.png" class="bg" alt="Lisboa" >
        <a href="index.html"><img src="http://s32.postimg.org/bdlm2uvt1/Logo.png" alt=""/></a>
        <div id="video-wrapper1">
            <img src="http://s32.postimg.org/c51ropy11/blue_dot.png" alt="" >
            <video id="video1" src="https://www.youtube.com/watch?v=Inufy4FdnRk">
                
            </video>
        </div>
        
    </body>

CSS

.bg {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
}

@media screen and (max-width: 1024px) {
    img.bg {
        left: 50%;
        margin-left: -512px;
    }
}

#video-wrapper1 {
    position: absolute;
    left: 700px;
    top: 100px;
    display: block;
    width: 31px;
    height: 31px;
    z-index: 99999;
}

JavaScript

var video = $("#video1");

    //check if video is ready to play
       $(video).on('canplay', function(){
          $(video).mouseover(function(){
             $(this).get(0).play();
          }).mouseleave(function(){
             $(this).get(0).pause();
          });
       });