How to increase page speed with lots of videos on it

Community resources Webflow Tips
1

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

3 Likes
2

Update on this: one of the question marks in the autoplay ?? needs to be deleted!! For Vimeo URLs, the video will NOT autoplay when there are two, only one!

1 Like