I spent a year creating a web template system that scores 100/100/100/100 on Google's Lighthouse test, with all kinds of dynamic content. Video backgrounds and embeds were a huge problem for us, but it can be solved.
It's really pretty simple. Any video embed must be "below the fold", and the iframe must be lazy-loaded. Now our pages don't see any page speed hit from video embeds, they only get loaded when the page is scrolled and the video is in view. Any other solution that isn't lazy-loaded will still impact page speed, and if that's important to the client, then don't load anything that isn't absolutely necessary to display what appears "above the fold".
For video backgrounds, our pages make a call to one of our APIs that gets the media URL from Youtube or Vimeo, and we then play that in a standard HTML 5 video player. It works great, and our Google Lighthouse score is above 95 even on pages with above-the-fold HD video that auto-plays. Loading a JS library from anywhere just to play a video is going to hurt page speed a bit no matter what.
It's really pretty simple. Any video embed must be "below the fold", and the iframe must be lazy-loaded. Now our pages don't see any page speed hit from video embeds, they only get loaded when the page is scrolled and the video is in view. Any other solution that isn't lazy-loaded will still impact page speed, and if that's important to the client, then don't load anything that isn't absolutely necessary to display what appears "above the fold".
For video backgrounds, our pages make a call to one of our APIs that gets the media URL from Youtube or Vimeo, and we then play that in a standard HTML 5 video player. It works great, and our Google Lighthouse score is above 95 even on pages with above-the-fold HD video that auto-plays. Loading a JS library from anywhere just to play a video is going to hurt page speed a bit no matter what.