Html5 video download delay

Question

I have a video element that is used as the background of the section at the bottom of the page I am creating. I am trying to create a “lazy load” for it by storing src as the data-src attribute and using jQuery to apply it to the src attribute after loading other resources (since this is not a hero image or whatever, I want to load a poster to save time download, then upload the video later). This does not seem to work for me at all. The src attribute is applied correctly, but the video does not load and does not start automatically. Am I approaching this from the wrong angle? Is there a better way to do this?

Wordpress Creation.

Basic HTML

<video width="100%" loop controls autoplay class="connect-bg">
    <source data-src="<?php echo get_template_directory_uri(); ?>/contact_Footer.mp4" type="video/mp4">
</video>

JQuery function

$(window).load(function(){
    footer_lazyloader();
});

function footer_lazyloader() {
    var $ = jQuery;

    $("video.connect-bg source").each(function(){
        var sourceFile = $(this).attr('data-src');
        $(this).attr('src',sourceFile);
    });
}

Answer 1

".load()" ".play()" . "source", "parentElement", :

$(function() {
  $("video.connect-bg source").each(function() {
    var sourceFile = $(this).attr("data-src");
    $(this).attr("src", sourceFile);
    var video = this.parentElement;
    video.load();
    video.play();
  });
});