I’m trying to insert a background video to the site header.
If I insert a file path (either full URL or /path/), the background is just blank. Tried in webm and mp4 formats.
I did try to use a YouTube video too, but that’s not working on all browsers. Related topic:
Bricks Version: 1.5
Browser: Chrome 90
OS: macOS / Windows / Linux / any
(P.S. also it’s kind of stupid that there’s no fallback option for different file formats)
Hi,
Thanks so much for your report!
Unfortunately, I cannot reproduce the issue using a video file or a Vimeo URL.
I can confirm an issue with Youtube that we are currently investigating. That’s why I haven’t replied to the post yet. However, you mentioned this in your other post (and by ticket if I saw it correctly), so I’ll close the other post now.
Can you provide me with a link so I can take a look at the code?
Best regards,
timmse
Thanks a lot timmse,
You can see the site at https://konstig.fi/skandino/ - this page has the YouTube background video.
I duplicated the hero module with background video hosted on site. URL: test - Skandino
To my surprise, it self-hosted video now works perfectly on desktop. Also tried it on the main page and it works. It might have been a plugin issue (Potentially with Microthemer or PixelYourSite plugins?) as I’ve gone back and forth with some plugins. Looks like I have accidentally solved a part of the issue. However, on iOS, a blank background is still shown. SS attached. This could be due to video file format, and there is no option for fallback.
Of course the issues with YouTube remain as well, but I’m happy that you’re aware and putting effort in to it! Thanks a lot.
(No, I didn’t open a ticket, didn’t know I could, yet)
Hey, sorry for the late reply.
From what I could research, WebM is not yet supported on iOS. That would also be a good explanation for why the video is not displayed. mp4, on the other hand, should work (and is supported everywhere, as far as I know).
As I said, we are currently checking the problem with Youtube Videos.
Side note: In the meantime, data volume is no longer a big issue, but I find it questionable to download almost 7 megabytes for a background video, of which I can only see a fraction on the smartphone anyway - but the decision is of course yours.
Best regards,
timmse
Hi,
Thanks for your reply!
I tried Vimeo as well, but it has even worse issues than YouTube: The video doesn’t autoplay at all, and it loads for near 10 seconds to even display the thumbnail/placeholder first frame. Besides, Vimeo doesn’t allow embeds in a higher resolution than 720p. Vimeo isn’t a solution either, I’m afraid.
And since neither YT or Vimeo is, I’m forced to self host the video. You’re right, 7MB isn’t sustainable on slow connections, but what should I do if fallbacks aren’t supported? Can I crop a separate video clip for mobiles only, I guess so?
Hi. I’ll try here instead of opening a new topic.
I’ve launeched a website, on the homepage there is a YT video, autoplay and loop activated. Just the iOS doesn’t support the autoplay?
Thank you for any idea. I went through all the native settings…
–Kamil Pitonak
This is a feature of the browser/device, not a bricks bug.
Copy that. Thank you!
