Autoplay video on mobile

Some browsers like Brave are disabling autoplay by default on any device. I think we need a back up option where a play button appears if autoplay is blocked for any reason @Norm

I have come across hero blocs with a video where the first video frame is black and all you see if a black void on the page with no video. If you do use video like this try to make sure the first frame has an image.

@Flashman
As far as I know, iPhones are are affected in general not auto-playing any video if Autoplay is on (and Controls are off). Firefox on Android autoplay my videos. Firefox on iOS (iPhone) does not, neither does Safari.

As soon as you switch on the controls in Blocs, the video still does not autoplay on the website, but with the controls it can be started (on iPhones). To Note Android phones are not affected by this - they autoplay fine.
But worse, a new problem just occurred that I did not have had before. On a client’s website I have on the home page a background video and on the shopping page the normal video bric. On both videos I switched in Blocs the autoplay and controls on and uploaded it 10 minutes ago to the web server. When I start either video on the iPhone, it plays the video in a modal with black background. However, this could be, because my video dimensions are not the predefined 16:9 standard in Blocs. But it is annoying, because the video dimensions had been specifically made shorter in height to remain in context of the other elements on the page.

Yes, you are right I wished that Blocs would have the function at least to put a “Play” button triangle in the centre of the video (like it is on the sample Vimeo video bric in Blocs) to start the play as an alternative control.
However, I think the whole kerfuffle has more to do with how Apple does not want video and sound to be played automatically.


@kwakukwaku
Yes, your video runs on my iPhone (16:9 Blocs standard) but the video is left and right truncated. Same effect as if you use a picture for the Hero Bloc and watch it on the XS breakpoint. Only the vertical middle ground of the image is visible. Same on an Android phone.


@Bootsie
It looks like an image with Ken Burns effect. If this is done as a video it does work fine in my iPhone. Now, how did you do this?

You’re right.
It’s an image with a Ken Burns effect made with iMovie and exported as a .mp4 file.

I haven’t tried it, but you may be able to do something similar with a still image using the card designer bric, that now has a full width option and that has a Ken Burns effect. https://blochead.dev @Whittfield could probably clarify that.

I’ll give it a try.
Stand by …

Make sure you get the 1.4 update. This was only released yesterday. Existing card brics will need to be rebuilt, but it’s a pretty cool update. Card Designer 1.4.4 is now available!

1 Like

Yes, but how did you make it work on the iPhone? Did you just use the Video bric in Blocs and what adjustment did you do? I guess it is a Local Video, 16:9 Ratio, with

  • Autoplay On
  • Muted On
  • Plays Inline Off
  • Loop On
  • Controls Off

That mp4 file cannot be large and I assume you did not change/add anything (Div, Column, Row etc.) in the Layer Navigator.

Got it already.
You can create a similar effect, but it is not the same.
I stick to the iMovie solution.

1 Like

Although I know there’s a thread or even a video for that, I’ll try to explain.

create a 1 column row bloc
set padding to None
set width to Full

in the row disable “Include Gutters”
implement the video bric in this column
now you have a full size column with a video which is fully responsive on all breakpoints

I hope this helps.
video

2 Likes

First Thanks a lot, Bootsie.

Aha, I see now what is different. You have checked “Plays Inline”. I have this not checked. I will try this and see if my video will work on the iPhone with this. :pray:

1 Like

I’m not sure if this is responsible for that.

@Bootsie
Thank you Bootsie. You solved the mystery.

@Flashman
You can make the video work on Android and iOS devices exactly the way Bootsie explained. It is indeed that you must check “Plays Inline”. My clients videos work now fine on my iPhone exactly as intended (jeffriramli.com/).

Yep,
you’re right.
Tested and confirmed.

1 Like

That’s good to know and I remember hearing something to this effect a while back. I still have to do some work on that video, but I’ve ticked the option now so I don’t forget. First I have to finish a client logo and then I have to complete my tax return online…

1 Like

Ouch, taxes. Grimm :face_vomiting:

I feel much the same way about the logo. Both are torturous.

1 Like

Thanks heaven, logos never bothered me. :smile: Then every success to you. :+1:

This is really annoying. It was all working a couple days ago on mobile. Now I come back to it and it’s playing on desktop as expected but only showing a still frame on mobile and I cannot understand why. I tried swapping the video and it didn’t work, so I went back to the original video and that has the same issue now. This should just work as advertised.

Have you set a Poster (image) in the Blocs video settings? Do you use a class for the video?

No poster image is needed. It picks up the first frame of the video and uses that instead and there is no class on the video. I have also found that it is not working on tablet either, only on desktop. The issue seems to be autoplay, because it works as long as you have a play button.