Lazy Load HTML5 Videos Explained [2024]

Updated: November 4, 2024 | by: Martijn Assie, creating websites & shops since 20 years, also Linux-, Wordpress-,
Photoshop- and SEO expert. | NL DE

Lazy Load HTML videos

How to lazy load a video? By means of Lazy Loading HTML5 videos we ensure that the browser does not start downloading until someone clicks the play button. For this we will use the attribute "preload" in the video element. By specifying preload="none", we prevent both the video itself and its metadata from being downloaded. Put your videos in the code below on your html page.

<!-- disable preloading -->
<video controls preload="none" width="680">
    <source src="files/sample.mp4" type="video/mp4">
</video>

Make sure NOT to make the mistake below. There should be no autoplay in the code because that will undo preload="none"!

THIS IS WRONG

<!-- video will still be preloaded -->
<video controls autoplay preload="none" width="680">
    <source src="files/sample.mp4" type="video/mp4">
</video>

USING VIDEO THUMBNAIL

If nothing is downloaded, a visitor will see a white or a black area, depending on the browser he uses, both not very attractive. I therefore recommend that you use a nice thumbnail image in the size of the video and use the code below. This will give you the result you were looking for.

<video controls preload="none" poster="img/cover.jpg" width="680">
    <source src="files/sample.mp4" type="video/mp4">
</video>