Check if this works for you.

var video_url=$("video source ").attr("data-src");

alert('Window loaded')

$(window).on('load', function(){
$("source").attr("src", video_url);
});

.video-section{width:450px; height:300px; border: 1px solid red}
.video-section video{width:100%; height:100%}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-section">
            <video width="320" height="240" controls autoplay>
  <source data-src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">

  Your browser does not support the video tag.
</video>
        </div>

You need to call .load() for video, like this:

<video_id>.load();

I try to lazy load the video with jquery. I used the same lazy loading technique for images and background-images and it works perfectly fine but when i used same technique in video, it didn’t work. What I did till now.

• change source src attribute to data-src attribute
• when the dom is ready, then change data-src attribute to src with the same values.

Here is my code

HTML

<div class="video-section">
            <video muted loop autoplay preload="auto">
            <source data-src="hello.mp4" type="video/mp4">
            </video>
        </div>

Javascript

let video_url=$("video source").attr("data-src");
$("video source").attr("src",video_url);