How to fix video for mobile size

[mcelso]

Hello!
After glancing through 121 replies to this thread, I still can’t seem to find the right answer to my problem. Although, mostly likely, I probably missed it…

On desktop, the background video loop works pretty awesome, I think. But on Mobile, how do I get the play button to be hidden? (screenshot attached).

Also, 2nd question — how can I get the video at auto height on all devices? If I add “auto” to the height settings, the video disappears. Or if I give it any fixed height or percentage, it still looks off on mobile and tablet (since screen size varies).

If anyone has the time to check my Webflow Design layout out, I’d appreciate it!

[PixelGeek (Nelson)]

try giving a fixed pixel height for your div that holds your HTML embed.

[mcelso]

@PixelGeek, thanks for the reply!
I gave the html embed a height, as you suggested, but it still looks cut off (screenshot)

After giving another thought, it doesn’t really need to be a background video. I tried inserting video element with a Vimeo link and I like how it’s definitely adjusted to all devices perfectly. BUT the only downfall is that I can’t seem to get rid of the controls (play/pause button) on load and autoplay. Would you happen know how I can remove that? Or is it something I should be asking Vimeo?

The actual Vimeo link in a browser, it does autoplay. But when embedded as video element in Webflow, it doesn’t.

Thanks in advance!

[mcelso]

Hi
I’ve also taken a look around elsewhere to see if I can find something to hard code it in. The closest I found was this:
http://jsfiddle.net/mgmilcher/8R7Xx/sho/

But on mobile (again) it has some issues. The video is not displaying.

[mcelso]

I have a solution (at least temporarily)! I figured, on mobile, there could be extremely lag time to actually and loop a video, which could probably annoy viewers. In the meantime, I’ll show an image (or image carousel) on mobile.

Thanks’

[EvanJones]

Hey @mcelso

Might have an alternative here which might be useful.

If you use VideJS for background videos (Vide - easy as hell jQuery plugin for video backgrounds) it will display a background video loop where supported and display a background image where there is no bg video support (mobile devices, older browsers etc).

In practice you just need to do the following:

1 - Add Vide in your custom footer code section:

2 - Add your data options to the DIV which you want your bg video to display in. The code goes into “custom attributes” like below:

Here’s some preconfigured data options to insert which should give you a video loop where supported and a background image where video is not available (just add the URL paths to your video files & bg image and you’re good to go!):

data-vide-bg
mp4: http://path-to/myvid.mp4, ogv: http://path-to/myvid.ogv, poster: http://path-to/bg-image.jpg

data-vide-options
posterType: jpg, loop: true, muted: true, position: 50% 50%

Hope that helps

best

Evan

[mcelso]

Hi @EvanJones — thanks for the great tip. That demo/example looks exactly what I want. And on mobile, it looks great.

I tried replicating your process. In theory, it should work! The newbie side of me probably missed something out, though.

In the Custom Attributes, I had typed in:

mp4:http://miracelso.com/dontdelete/hc_anim.mp4, ogv:http://miracelso.com/dontdelete/hc_anim.ogv, poster: http://miracelso.com/dontdelete/hc_anim.png

And in the custom footer, I have:

When I test it, the video doesn’t show up:
http://hancelso-option-b.webflow.io/

From what I showed, did I mess up somewhere?

Thanks so much in advance

[mcelso]

@EvanJones,
Ah!I found my problem. I didn’t give the DIV a set width/height.

Thanks so much @EvanJones & @PixelGeek! I can take it from here.

[EvanJones]

Glad you’ve got it working - have fun