I'm trying to struggle against against a large Cumulative Layout Shift (CLS) in a page where my biggest problem is (according GTMetrix) » Avoid enormous network payloads
So, my question is: Since the video is from an external URL, I was thinking if it's possible only load the video URL after page is completely loaded
Here's my code:
<video controls poster="https://picsum.photos/id/237/560/320" width="560px" height="320px" controlsList="nodownload" class="connect-bg">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
</video>
Is there any way to do this? Will it work?
Everything is explained in comments so read it first.
// fires when page is loaded
window.addEventListener("load", () => {
// get video by its id
const video = document.getElementById("video");
// poster and src url
const poster = "https://picsum.photos/id/237/560/320";
const src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4";
// set video poster and src
video.poster = poster;
video.firstElementChild.src = src;
// load video
video.load();
});<video id="video" controls width="560px" height="320px" controlsList="nodownload" class="connect-bg">
<source src="" type="video/mp4">
</video>If something is wrong then please tell me, I will fix it.
I am not 100% sure that this work.
Thank you!