Responsive Background Video for Andriod/iPhones


#1

When a Background Video is accessed with a Tablet or Smartphone does the video play?
Do you need to make several size videos? One for Flat Screen, One for Tablet and One for Smartphones? What format work best?


#2

Video backgrounds don’t play on mobile and tablet. The effect used to do is blocked by the mobile browser as it causes high battery usage. There are hacks but they can be unreliable.


#3

I’m setting up my first site and knowing that videos don’t play on tablets and mobile devices, what I’m doing is enabling a background image just for mobile & tablets, and video only for “desktop” viewing. I haven’t tested that yet as I’ve yet to launch my site, but that’s what I’m doing (hope it helps).


#4

Thank you Norm. :slight_smile:


#5

Very cool of you to respond. :slight_smile: I would assume Blocs has those choices or did you edit the code?


#6

@Norm, Here’s a very simple workaround that seems to work fine. (I have only verified though that it works on Apple iPhone) You can check it out on my new website (under development yet). This is a Blocs project. The first screenshot is what Blocs generates on export. The second screenshot shows the code I replaced the Blocs code with. Just be sure to add the .webm video (in addition to the .mp4 format you attached in Blocs) to your video folder after export.

Here’s a link to my website to view this video working on mobile:
https://www.creativevisual.net

Warm Regards, Randy

This was generated by Blocs:

This is code I replaced Blocs code with:


#7

This is an issue that seems only to affect background videos. If you place a video using the video bric, it can be set to autoplay, even on tablets and mobiles. This is because the pressure is on mobile device and browser developers to allow autoplay video (up until recently it wasn’t done for the reasons @Norm has already pointed out and also it was considered theft of bandwidth) However, advertisers rule the roost in the world of the internet, so normal videos will now autoplay in most mobile and tablet browsers.

To create a pseudo video background for your tablet and mobile devices, you should set up your video background in the desktop version of the site, but hide the bloc containing the background from other device variants. On the other devices, add a full width structure bloc with no padding and no gutters (select the row within the bloc to uncheck the include gutters option)

Now place a video bric in the Bloc. Select your video and set it to autoplay, loop and no controls.

If you want to add text over the video, create a new bloc directly beneath the video bloc and add a text or heading bric. With the heading bric selected, create a custom class and apply a NEGATIVE top margin to position the text within the video. You may have to adjust this top margin for each of the mobile device variants. Finally, make sure that the video bloc and the associated text bloc only appear on the mobile and tablet variants of the site by using the visibility options.