Video autoplay problems...help greatly appreciated :)

Community resources Product feedback
1

Hi all!

So I have a section at the bottom of the Humanlytics page (incase the read only link sends you to the homepage) where I’ve got a background video that I want to autoplay on mobile…I’ve had a look through the forum and I can’t find a definitive bit of custom code that allows this! There was one that was posted here (Make Webflow's Background Video PLAY on iOS and Android) that doesn’t work for me.

Also, when the video appears on mobile, there is another blurred crop of the video behind it…can anyone advise for either? Thanks so much! I have this custom code in the head section of the project so that the video doesn’t have a weird crop on the screen…is that the problem?

<style> .w-background-video > video { width: 100%; } </style>

here’s my read only https://preview.webflow.com/preview/jahan-portfolio?utm_source=jahan-portfolio&preview=bbec44e9e7ee3d74cdade2b92aefce10

and here’s the link to the published site… https://jahan-portfolio.webflow.io/humanlytics

Really not sure where to go from here…thanks in advance for your help everyone :smile:

2

Hey @jtahh,

I am not sure why, but the video poster is the “blurred crop” behind that is showing.
few things I might suggest to make everything more clear:

  1. Lose the display:grid on the .project grid element. Since your design is mostly vertical, you don’t really need a grid, and it will make it easier debug.
  2. Try giving your background video element a height property, so it will keep the same as the aspect ratio of the video. Since background video’s default is to cover the div, it expands beyond the bounds of that div when the height isn’t adjusted.

lmk if that helps

3

Thanks for the feedback!

  1. Do you mean on mobile? And what display would you recommend, flexbox? I will give it a try :slight_smile:
  2. I tried that, gave it a 500px height and still having the same problem…in fact it doesn’t even work when I press the play button on mobile now, it gives me a stretched poster behind it and an unresponsive play button!

Is there a way to change the background video from cover to contain?

Not sure where I’ve gone wrong ahaha…

4

  1. For Big screens and for Mobile - I would try to follow The Box Model. Only when there’s a real grid design need I will use the grid layout.

  2. Play button? isn’t this a background video?

5

  1. I’ll have a look - thanks!

  2. Yeah, that’s what I was thinking…

6

I don’t see any play button :frowning:

7

Are you on mobile or desktop? Desktop is fine, but it’s on mobile that I’m having the majority of the problems…

8

looking at both. desktop and mobile

10

iOS.
Plays sometime. It is buggy :frowning_face:

11

Ahhhh this is super frustrating, not really sure where the problem is. Thanks so much for your help though

12

Out of topic. Your site looks a little slow. First handle your images.

image

Compress

Example of tinyjpeg for this image (74%)

image
image1000×467 171 KB

Use relevant Width and height images

In this area you use 7000px width images (But the real dimension [desktop] is 370px!! 5%)

An image with 5% width will be ± 5% of the size (Or even less)

https://uploads-ssl.webflow.com/5c8196332c6a676837cb2300/5cb162d137cbae0bfb03a2f9_top.png

image
image973×651 141 KB

Webflow sites are very fast - but no way “to beat” site with such huge images.

1 Like
13

Not the problem that I’m looking to solve right now but i’ll for sure take a look at this. thanks for the info and links!

I’ve also put an intentiona 1250ms delay on page load so that the transition can finish - is this too long in your opinion?

14

Maybe try 500ms-1000ms. Anyway first solve the images problem (Again the site slow).

15

Incase anyone is interested, I managed to solve my problem a bit of a different way. I created a repository via prismic.io, uploaded the video, and then embedded it into my site using a HTML embed and this code:

    <div style=";position:relative;">

<video src="https://prismic-io.s3.amazonaws.com/jahanhussain%2F9356fa10-56a2-4dc6-92cd-9289c5eaf77c_humanlyticsanimation.mp4" preload="auto" loop="" playsinline="" webkit-playsinline="" style="width: 100%; height: 100%;" autoplay=""></video>
</div>

Been pulling my hair out hahahaha but this works for me! Video with no borders/branding and autoplays inline and loops on mobile and desktop.

I’ve also gone and changed the image size in my website, thanks for the advice @Siton_Systems!

1 Like