You have been very helpful. Thank you and I hope others will now be more aware of this. Frankly I expected Blocs to just handle this though.
It’s been quite a while since I last looked at this in Rapidweaver, but the Sections Pro stack has amazing flexibility for handling video as a background. You can have it set to only play when a play button is pressed within a background video header or indeed not at all on certain device types.
Hi @Flashman
Well then.
If my assumption is correct, the following code should avoid the video from being downloaded in the background.
<style>
@media (max-width:767px) {
.video-bg-container {
visibility: hidden;
}}
</style>
Then obviously we can also set different images for each breakpoint with additional media queries.
Have read your conversation with @hendon52 and to be honest I am not sure I followed through the real point. That said still hope that my little piece of code with prove useful.
MDS
The problem is that your code is only hiding visibility I believe. It still downloads in the background, just as it happens when you use the visibility settings in the side panel of Blocs. It’s merely hiding it from view, rather than blocking it from downloading and serving the image instead.
I first uncovered this problem a while back when I checked a site using an app called Robotize, which revealed I had two H1 tags and two menu navigation brics on the home page. Further investigation showed that having one bloc for mobile, then another for desktop did not stop the content being downloaded. It was therefore seen by search engines and hurting page loading speed at the same time.
After I changed it to remove the separate blocs and relied on a custom class to set the image background the problem went away and the site became faster loading. We can do this already with images and set any image we like at any breakpoint using a single bloc, but not for video. In essence that is the problem.
Hi @Flashman
Okay I get it now, though I have not checked whether or not the video is downloaded on mobile. I assumed that the video on my mobile was not being downloaded as when I used the preview address on same network it was instantly fast (for the : hidden)
So what you need is actually different from your initial request to which extent the codes provided a solution.
Will still see if there is another way…
MDS
I just put up a quick page at https://liubliu.co.uk/mds/ and it loads quickly there on mobile, but visibility in Bootstrap doesn’t stop content from being physically downloaded by default. I think what we need to use rather than “hidden” is something like “.d-none .d-md-block”, as detailed here in the answer with a green tick:
Your solution works visibly, but I could have achieved the same result using two blocs and visibility if my understanding is correct. I wanted to make sure this was done efficiently, so there is nothing downloaded unnecessarily. In theory this is also downloading the image, when viewing the video as well, but perhaps Norm could verify that.
Sorry I have not been helpful this time.
MDS
You have been very helpful and I appreciate the efforts of anybody who contributes constructively. Obviously I want to fix this for the project I am working on, but my longterm hope is that we can find a way of doing this effectively, using the built in features of Blocs without need to add separate code. This should really be a one button selection in blocs.
I understand. Unfortunately we might still need to add quite some code if we want to customise further now and in the near future. That said, Blocs is getting there quite rapidly.
MDS
This appears to work for me in Blocs and I’ve uploaded a test at https://liubliu.co.uk/mds-block/
I can see you have used the block sub class. It would be good to hear the thoughts of others, who may be more knowledgable about Bootstrap than I am. On my phone there is no visible video with either solution you offered, but in theory this should stop the video downloading in the background.
A good aspect to come out of this thread is that we established video is playing on some mobile devices without the developer being aware. Many of us thought video backgrounds were blocked by default on mobile. This clearly needs some attention from Norm.
I do not have the ability to publish today so I was just using the preview on same network.
So to sum up: you see the video with display: none and visibility: hidden but not for the .d classes ? Is that correct ?
MDS
Curiously, I just tried creating the same custom class and up popped this message.
By adding the dashes I presume we can add it as a custom class to that one bloc without altering other areas.
EDIT: It’s not working for me when I try in my own project. Evidently I am doing something wrong here.
You have to click “No, leave spaces intact” then once created, you simply copy paste it on the right hand side (it will break down into two classes) and make sure you have selected the video background on the left.
Now going out for supper will catch on later if needed.
MDS
Guys no need for additional classes etc. You can hide video backgrounds in app.
Since the intro to Blocs 3 you’ve been able to select the video background layer in the tree, this is all in the knowledge base 
This covers adding YouTube video backgrounds, but it illustrates how to select the video layer so you can hide on viewports.
https://help.blocsapp.com/knowledge-base/youtube-video-background/
OK but is that still allowing the video to download in the background? I thought visibility just hides stuff from sight in Bootstrap without blocking the download. This was the issue I had when using separate hero blocs previously for mobile and desktop, relying on visibility.
Lazy load may prevent the load on mobile since the view is hidden.
Other than that you would most likely need to edit the exported code and use some php to prevent the load on mobile.
Lazy load messes up the SEO to an extent, but may be a viable trade off in this instance, because it’s only a one page site with half a dozen images and that 14mb video. I want to do the same thing soon on a 100+ page site and it would definitely be a problem there.
If I look at the case of a hero bloc using separate images based on breakpoint via custom classes, that seems to work OK and I can see from Pingdom that it only downloads the chosen image. The problem is that we cannot choose a video in the same way as a background through custom classes. When you navigate to the folder, all the videos are greyed out and cannot be selected.
14MB video??? Yikes!!!
A 14mb vid on auto play in the hero, that is way to big.
Did you compress it with handbrake?
IMO hero vid (auto play) should be 5mb max.
I actually have a bunch of improvements for SEO coming soon, it’s an area I want to improve. But sadly huge video files being forced to play on page load is only improved by quality CDN or more in depth video options but I’m unsure how big the demand is for support for multi res videos.
I wondered if a tweak to custom classes, recognising MP4 videos as a format for background usage would neatly solve this. We have video backgrounds as an option in the side panel, so it seems strange they are not selectable via custom class like images.
The current video I am playing with is 19 seconds long and at 1080 quality. I could put the 720 version there instead I guess, which would bring it down to 6.9mb. There is an alternative 10 second clip that could come down to 3.8mb, but it’s not as cool. You can see though why we don’t want video like this downloading on mobile in the background, even if it’s not visible.
Rather than using Handbrake, I run them through Vimeo, then download the encoded version, which is a neat little trick for obtaining good quality with excellent compression and compatibility. The original video here was 42mb and there is no loss of visual quality. I also have a neat trick for the video that has fast loading at zero ££ cost without taxing the main server 
On the lazy load side, it’s a good idea in general, but Google doesn’t like the current implementation and recommends other methods. At present, you can upload a 100 images with good files names plus alt tags, then list them individually in the sitemap, but if you select lazy load as an export option, Google won’t index any of them.
The news of SEO improvements is welcome indeed. Obviously I want this for my own sites, however it also has a powerful effect on attracting new clients, because they look for websites in their own niche and tend to contact you for design work if they see you have done a website that is high in the rankings of Google for the same area of business. It becomes a powerful marketing tool for web designers that way.
As a quick follow up, I am currently adding structured data, twitter card, open graph, canonical links and more inside Blocs, so these things are possible, however the process is generally fiddly and relies on outside sources for much of it.
You should try hand brake it’s amazing. It really gets the file size down.
Unfortunately there is no way (I know) that lets you assign a video via classes. Unlike an image, a video requires a player html tag, so simply assigning a video via the class background attribute is not going to work.
