I know I could use separate blocs, but I’m wondering if this could be done more efficiently. Basically I would like to have a full page hero bloc on desktop and tablet with a video, but switch to a still image for mobile.
Ideally this should be possible via the side panel settings or custom class. I experimented earlier to see if I could set a smaller video for mobile via custom classes, but the image option that navigates through the finder would only allow me to choose an image, rather than video and the original video still overrides it.
A different point, but relating to the same subject is that browsers are now implementing blocks on video autoplay and I think we need an option to set a fallback poster image if the video doesn’t play. A poster image for mobile could in theory solve the initial problem as well if we had the option to choose the still image on mobile.
I’m a little surprised nobody seems to be interested in this. If we use two separate hero blocs for mobile and desktop it is bad for SEO due to double header tags and remains slow loading, because the hidden content downloads in the background.
I can do this really easily in Rapidweaver using Sections Pro and we need an option that allows us to do this efficiently via the side panel or through custom classes. Any chance this could be added soon? @Norm It’s pretty straightforward with images via custom class, so should be feasible with video.
I wanted a hero bloc, complete with headers and interactions using a video background for desktop & tablet, but a still image for mobile. We can currently select different still images at each breakpoint as a background image inside a hero bloc, but it isn’t possible to use a video at one size, then an image on mobile.
@MDS Thank you, that works to an extent, though I would probably do this at the SM 768px breakpoint, rather than XS.
With images I simply do it like this where you choose separate files for different breakpoints using a custom class, while keeping the selection in the side panel empty. In this case I wanted a simpler image at SM and XS, so the header text was more legible. Ideally we should be able to to do the same thing by choosing between video and images at different breakpoints.
What you have done sets the display to none, but doesn’t stop the video downloading in the background and that’s the main point here, wanting to make it faster on mobile.
All it really needs I think if for Norm to let us select a video as a background, just like we can currently do with still images. Done properly, we could also have one video for large devices and a smaller one for mobile, which is very easy in Rapidweaver.
My understanding of video backgrounds is that they automatically default to a static image on mobile devices. Just click the video checkbox in the background section and drag a video file into the background. Then drag a static image to the image background box. When viewed on a mobile, the image will appear in place of the video. This doesn’t show up on the previews, but does work when uploaded.
That was definitely the case in the past, however I have tried live testing with a draft version on the server and the video plays here on my phone inside the hero bloc. It’s a 1080 landscape video intended for desktop and on the small screen I’m only seeing a small section that makes no sense at all.
What happens when you check my test page at triselcommunications.com/videoTest This shows up on my mobile as a static image - a red sunset - but when viewed on a desktop, it shows the video. It maybe that some newer phones allow the the automatic playing of videos - it never used to be the case because of bandwidth issues, but maybe all that is a thing of the past.
It must be your particular breed of phone - many phones won’t start video playing automatically - you may have to find a solution that detects screen size. It may be that @norm can incorporate this feature in a later version of Blocs so that it will be possible to specify a static image on certain devices regardless of device capability. What phone are you using?
maybe you could put a demo page online so others can check on other mobiles - maybe we need to do a quick survey of phone and OS systems to find out which ones no longer swap out video for images by default. That way we’ll know if a workaround is worth the effort.
On my LG mobile, I only see the white background - the video doesn’t autoplay. This appears to be a growing problem today. Apparently, the tech companies have moved away from preventing video from autoplaying because of `pressure from advertisers - video ads are now big business so they want the videos to play without user consent. Given that this is a growing problem that is annoying many users, I think @norm should try and come up with an override that will only serve up a still image on mobile devices. I don’t know how it works at the moment, but my guess is the feature relied very much on the autoplay block built into mobile devices. This is clearly being phased out, so we need some additional code to override that behaviour. Hopefully someone at Blocs will read this and come up with a fix - perhaps a simple checkbox that will insert the relevant code. I should imagine this will cause even more problems, particularly those that may embed multiple videos on a page. Can you imagine them all firing off at once when a page loads - not good news for those that may be on capped broadband.!!!
That video of the motorbike is 7.5mb and in theory that should stay in the cache once loaded, but it’s still 7.5mb on a mobile device as the page is loading, even when display is set to none as @MDS tried.
It plays fine on my phone over fibre wifi, except that the image is cropped and virtually unrecognisable, so I am only seeing the helmet without any of the bike or scenery around it. On a smaller mobile it would be even worse.
Just tried a Moto G5S running 8.1 and the video plays on that as well. It wasn’t quite as fluid, but it did play. This was using Chrome as the browser.
Also works on a Moto G (3rd generation) running 6.0.1. That’s pretty old now, so this issue has potentially been present for a long time.
I take your point. That is one of the problems with background video in a hero block. Because the Hero is set to fill the device screen, it can’t be responsive due to the difference in aspect ratio - therefore, it will crop rather than scale. As I said, this is becoming an industry-wide problem because the tech companies are disabling the block that would otherwise prevent a video from playing without user consent. In the case of a background video, it’s not possible to have a play button in the background, so the Blocs answer was to swap out the video for a static image - a very sensible solution. This is option is now being circumvented by the tech companies which means we have to find a workaround. Hopefully, the guys at Blocs will come up with a solution. Interestingly, one of our tech guys recently filed a complaint about this very issue with the EU Digital Economy and Society Commissioner - Mariya Gabriel. Maybe we should all write to her and get the EU to outlaw this practice. It’s not good for web designers and it’s certainly not good for consumers who have their bandwidth stolen by advertisers. Anyway, sorry I couldn’t be of more help in finding a solution - it’s over to @norm to see if he has an answer.
