how to troubleshoot html5 video not playing using Coverr's code

Question

I've uploaded a video from Coverr, and added the HTML, CSS, and JS to my home page.

However, the video does not play.

HTML:

<div class="homepage-hero-module">
    <div class="video-container">
        <div class="filter"></div> 
        <video autoplay loop class="fillWidth"> 
            <source src="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.mp4" type="video/mp4" ></source>Your browser does not support the video tag. I suggest you upgrade your browser. 
            <source src="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.webm" type="video/webm" ></source>Your browser does not support the video tag. I suggest you upgrade your browser.
        </video>
        <div class="poster hidden"><img src="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.jpg" alt="Escalate your business internet success with the help of a web professional"></div> 
    </div>
</div>

CSS:

<style>
.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
}
.no-video .video-container video,
.touch .video-container video {
    display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
    display: block !important;
}
.video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
}
.video-container .poster img {
    width: 100%;
    bottom: 0;
    position: absolute;
}
.video-container .filter {
    z-index: 100;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
}
.video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
}
.video-container video.fillWidth {
    width: 100%;
}
</style>

JS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
//jQuery is required to run this code
jQuery( document ).ready(function() {

    scaleVideoContainer();

    initBannerVideoSize('.video-container .poster img');
    initBannerVideoSize('.video-container .filter');
    initBannerVideoSize('.video-container video');

    jQuery(window).on('resize', function() {
        scaleVideoContainer();
        scaleBannerVideoSize('.video-container .poster img');
        scaleBannerVideoSize('.video-container .filter');
        scaleBannerVideoSize('.video-container video');
    });

});

function scaleVideoContainer() {

    var height = jQuery(window).height() + 5;
    var unitHeight = parseInt(height) + 'px';
    jQuery('.homepage-hero-module').css('height',unitHeight);

}

function initBannerVideoSize(element){

    jQuery(element).each(function(){
        jQuery(this).data('height', jQuery(this).height());
        jQuery(this).data('width', jQuery(this).width());
    });

    scaleBannerVideoSize(element);

}

function scaleBannerVideoSize(element){

    var windowWidth = jQuery(window).width(),
    windowHeight = jQuery(window).height() + 5,
    videoWidth,
    videoHeight;

    console.log(windowHeight);

    jQuery(element).each(function(){
        var videoAspectRatio = jQuery(this).data('height')/jQuery(this).data('width');

        jQuery(this).width(windowWidth);

        if(windowWidth < 1000){
            videoHeight = windowHeight;
            videoWidth = videoHeight / videoAspectRatio;
            jQuery(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});

            jQuery(this).width(videoWidth).height(videoHeight);
        }

        jQuery('.homepage-hero-module .video-container video').addClass('fadeIn animated');

    });
}
</script>

I see no errors in the console, so I don't know why the video does not play in the latest versions of Chrome or Firefox.

Help appreciated.

Answer 1

Your video is actually playing but it's hidden under your poster div. Unless you have another reason to use a seperate div for the poster, you should consider using the poster attribute for the video element like so:

    <video autoplay loop class="fillWidth"  poster="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.jpg"> 
        <source src="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.mp4" type="video/mp4" ></source> 
        <source src="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.webm" type="video/webm" ></source>Your browser does not support the video tag. I suggest you upgrade your browser.
    </video>

But if you have the autoplay attribute you won't need the poster, except perhaps when the video loads slowly.

To annotate the video with text you can do something like this:

<div class="video-container">
    <div class="filter"></div> 
    <video loop class="fillWidth"  poster="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.jpg"> 
        <source src="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.mp4" type="video/mp4" ></source>
        <source src="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.webm" type="video/webm" ></source>Your browser does not support the video tag. I suggest you upgrade your browser.
    </video>
    <div class="video-annotation-layer">
      <div id="video-annotation-1">Hello there!!</div>
      <div id="video-annotation-2">Hey buddy!!</div></div>
</div>

Then in CSS:

.video-annotation-layer{
    width:100%;
    height:100%;
}
#video-annotation-1{
    position:absolute;
    top:40%;
    left:40%;
    font-size:50px;
    text-align:center;
}
#video-annotation-2{
    position:absolute;
    top:60%;
    left:30%;
    color:blue;
    background-color:white;
    font-size:40px;
    text-align:center;
}