Chrome bug with CMS video on hover
Hi! I have embedded a video from the cms per custom code, which appears while hovering over the cms item. But only in Chrome it doesn't show some videos on hover when first time loading the page. After refreshing the site it works perfectly.
The read-only link:
https://preview.webflow.com/preview/philippscheithauer?utm_medium=preview_link&utm_source=designer&utm_content=philippscheithauer&preview=280069f9bfeae306eca4dd3009dcd399&pageId=653e9cfb84a3efc081e4fdc4&locale=de&workflow=preview
The live site: https://www.philippscheithauer.com/
Thanks a lot!
Philipp Scheithauer - Colorist
Selbstständiger Video und Film Colorist aus Köln (NRW), Deutschland - Professionelle Lösungen im Bereich Color Grading, Mastering, Deliverables and Dailies. Entweder Remote oder in der Grading Suite in Köln.
16 Replies
Hey @Alina Scheithauer thanks for posting here!
The short answer of it is "there's a lot of video being loaded on page load"
I still get the loading spinner after like 5 min
my hunch is that there may be one video that is causing the browser to hang/freeze
OR maybe some interaction is happening which then affects the video loading process
I would probably try removing autoplay from all the videos, then write some javascript to load and play the video on the hover event.
there's just too many videos to be loading on page load here I think. The browser may be getting confused too. they often have optimaztions to lazy load and/or not play stuff that's not rendered on page. It might be getting confused with what's going on with the tabs component and more.
On a project where I had a lot of video like this I wrote some JS to load the "above the fold" videos right away, and lazy load the rest as the user brought them in to view (hover in your case, scroll in mine)
I hope that helps! I'd probably look to use a lazy loading library for video too.
If javascript is outside your area of expertise, you might consider rescoping with your client... maybe shorter clips and/or file format (.gif) or removing the hover effect altogether somehow
That’s what I was thinking and was searching today for a solution/custom code to only load the video on hover. Found this to deactivate the default loading of the browser: https://web.dev/articles/lazy-loading-video
web.dev
Lazy loading video | Articles | web.dev
This post explains lazy loading and the options available to you when lazy loading video.
But couldn’t implement it to work (tried it with the hidden page ‚Test‘). But I have definitely no expertise in JS to fully understand it, well since this is actually my first site in Webflow overall. 🙂
Wow - looks great for a first Webflow build
But what irritates me:
- On mobile it does not load endlessly
- The endless spinning loader appears on first load - no way it will load anytime soon, been waiting ages / but refreshing even after just a second solves the issue
- The ‚All’ Tab works; so since there are all videos shown I don’t think it’s a single video issue
- Guess with all the tabs it’s somehow to much/interfering
And well, the client is very difficult… must run in the family I guess. (He’s my brother, I’ll commit him to make different formats of the videos to try it out)
Webflow has some of its own lazy load code that ships with the site too but I’m not 100% sure how it works. I’m pretty sure it will try to load everything that has autoplay though!
Oh thank you! Design is from him, I've developed 🙂
And works fine in Safari too?
Or Firefox?
Both perfectly!
Yes frustrating 😭
If I get more time I’ll try to see if I can create a demo.
You might also try duplicating the project and deleting stuff incrementally to see if you can’t find a smoking gun. Might not work either though 🙃
Yes, I HATE it when I don't find the solution 😂
Oh no pressure, very grateful for taking this much time for the problem already!
Same.
I think it's worth figuring this one out. I have a project in mind that would do something very similar!
Sounds great! I will definitely keep you updated if I find any groundbreaking fix.
I think I kinda fixed it 🙂 after a loong discussion with ChatGPT and finally coming up with a working JS code
The site still loads endlessly and the transitions (text and hover out) are only smooth in the initial tab, not in the others - so now figuring out the next problem 😅
Also:
- It worked with gifs. But what’s interesting: They were with a size of 1 MB bigger than the videos (but of course baddest quality), no loading problem
- Tried it without tabs and showing just one collection list - no problem. Once I’m duplicating and showing two - bug. Limiting both of their items to half does not change anything (they probably still get loaded, just not shown I guess)