Hello Shopify Squad,
I would like to load a video file (preferably from my saved files, but I am fine with youtube URL if it works) as my Header hero image in a loop. Currently you can achieve this with the default Slideshow section with the Narrative theme, however, the video does not load on mobile which is where my problem lies.
The video works for desktop but the pause play button is in the way of the image which I don't like and I'm primarily concerned with optimizing for mobile. The video I would like to use it 4k and only 2 MB in size, and in an attempt to remedy I have made a GIF of the video but the quality of the GIF is poor and the file size is larger causing slow loading times on mobile.
By default, the Slideshow is not removable which is a problem because even when attempting to add Custom content, the Slideshow is still displayed with empty content and the custom content section can only be placed underneath. I found an article that was helpful in loading the video in a loop state with custom content here but again it doesn't go in the header section underlay as I would like.
I've found another store (https://shopfurry.co) that has the Header section functionality exactly how I would like and it works both on desktop and mobile. When Inspecting the source code, I can see they have added similar custom HTML as linked above.
Hopefully, this context makes sense but please let me know if I can help clarify! This is one of the final tweaks and optimizations I need to make my store 100% running how I would like. Many thanks in advance!
I believe this is bug in Narrative theme that video doesn't play on mobile devices.
You need to contact the theme support to get it fixed.
Hope it helps!
|2 hours ago|
|2 hours ago|