Solution 1 :

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=""></script>
<div class="video-section">
            <video width="320" height="240" controls autoplay>
  <source data-src="" type="video/mp4">

  Your browser does not support the video tag.

Solution 2 :

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


Problem :

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


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


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


Comment posted by Pranay kumar

Didn’t get any error, but the video didn’t play. Not even get loaded.