Different Video on Mobile and Desktop, both loading

[Kilian91 (Kilian Hallweger)]

Hello! i wanted to make different Background Videos on Mobile and Desktop for my Site but its loading both in Pagespeed Insights somehow.

Here is my Pagespeed:
https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.gleitzeit-tandemfliegen.de%2F
and my share-only link here:
https://preview.webflow.com/preview/gleitzeit-tandemfliegen-6-7ae59d5f06a4b?utm_medium=preview_link&utm_source=designer&utm_content=gleitzeit-tandemfliegen-6-7ae59d5f06a4b&preview=710b555042466f4da94e45e9de1d50c9&workflow=preview

I already found a topic about that but all the links are deleted and i cant look it up anymore…
does anyone know if in the “real world use” of the website also both videos are loaded?
what can i do to get better results in Pagespeed? any advice?
Thanks!

[Drew_Schafer]

Hey @Kilian91

Technically everything in the Navigator will load on every breakpoint. Changing the display to none of an element on one breakpoint will only hide it out of view on that breakpoint, not stop it from loading.

You can see this yourself by just sizing up or down your browser window and you will see the styles associated with each element change.

If you want to speed things up and only load one video source, you should look into HTML5 video and Custom code. Here is an overview of HTML5 Video Getting Started with HTML5 Video - Treehouse Blog

You can specify different videos to load for specific breakpoints using Media Queries as specified here: Responsive HTML5 video - Ian Devlin :: Web Developer

However, just note that you will need to host these videos externally as Webflow does not provide hosting of video files outside of the background video element.

Cheers!