Slow fadeIn on page with video - Chrome

Question

I have a to slow fadeIn effect when I tring to show simple popup by clicking on button. Without video all of it works fine. Video on my page have a 100% size and fixed position

video#bgvid{
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background-size: cover;
}

Also, there is a popup html code

<div class="blackpopup">
  <div class="container">
  </div>
</div>

And css:

.blackpopup{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.58);
}

Javascript code is simple:

var popUpThank = jQuery(".blackpopup");
    var submitButton = jQuery("#submit");

    submitButton.click(function(e){
        e.preventDefault();
        popUpThank.fadeIn();
    });

So, how to make it not so slow and where is the problem?

Answer 1

The answer is: not saturating the browser's memory with a hell of a heavy video. Try doing the same removing the video tag it will work. Compress it better, or with low quality as it's a background object. I can point you to sorenson squeeze app for that.