So you have a web page with several videos on it, and your Google PageSpeed score has tanked because of it. This happened to me and below is how I overcame it.
This method stops the browser from loading the video entirely until it is called upon by the user. Instead of presenting the user the video itself, it presents the user with an image of the video. Once clicked the video will be loaded.
This method is presented with VIMEO though it will also work with YOUTUBE links
Firstly, don’t use Webflows video widget. Instead, use an embed element and add the following:
<iframe
width="560"
height="315"
src="https://player.vimeo.com/video/375468729?"
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://player.vimeo.com/video/375468729??autoplay=1><img src=https://vimeo.com/assets/images_v6/lohp/video2_thumbnail.png alt='Access Storage Parking unit'><span>▶</span></a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
title="5x5 Unit"
loading="lazy"
></iframe>
To recreate the video with your image and links you need to change three things.
1- src="" – You will need to add your link here.
2 & 3 -srcdoc="" - There are two sections of this snippet you will need to change.
First- You need to change the href to your url. At the end of the url there will currently be ??autoplay=1. This will autoplay the video once the user clicks it. I recommend leaving this as your user would have already clicked play.
Second- <img src="">. This is where the image will be placed, creating the thumbnail for the video. (Note: The best way to get the image for the video is to pull it directly from the original website (vimeo/youtube). You can do this by inspecting>sources>images.)
Copy the image URL and paste.
Please note: You do not need to add anything into your <head> tag or </body> tag.
The original article: Lazy load embedded YouTube videos | CSS-Tricks - CSS-Tricks