Display a 16:9 Vimeo-Video as full-screen background on Mobile (Portrait)

Design help General
#1

Hey Webflowers! Does anybody here know if I can use the Vimeo video HTML embed on mobile & tablet (portrait) to cover the full screen with the video even if the video has a ratio of 16:9 on Vimeo?

I don’t care if it’s in the end cut off left and right on mobile devices, because it is just a mood - but it’s important for me that it covers the fullscreen and not just the top part (like it is now).

Any tips on this?

Thanks a lot!
Holger

#2

Yes you can do this, do you want it as background video or as an independent video?

#3

Hello! Thanks for answering!

I think I want is as a background video which should start playing automatically (like it is in my example on desktop) - but I am not sure what you mean with “independent video”.

Do you have a workaround for this?

#4

@aaronocampo I found an example of what I want to achieve:
https://fvsch.com/video-background/test.html
(resize browser window to see how the video behaves on different viewports)

The difference is: In my case I have to use the vimeo embed + I want the video as a mood in the background - this means no video controls are necessary.

I hope this makes it clear. Thanks in advance!

#5

Something like this?

http://video-bg-loop.webflow.io/

#6

Yes…basically something like this :slight_smile:
Does it work as well with a vimeo embed?

Thank you :slight_smile: - I really appreciate your help!

#7

Are you aware that in order to use a vimeo video as background with no controls you need a vimeo paid account?

I would recommend downloading the video and upload it to Webflow to achieve this.

#8

Yes. I am aware of that. My friend has a plus account. And with the embed code I got from vimeo it was possible to achieve the fullscreen on desktop, but not on mobile.
https://andireel.webflow.io/

I am afraid if I download the video the filesize would be probably to big to display as background-video, that’s why I want to use the embed-option. + I read somewhere else that it’s always better to use the embed-option …

A workaround which “breaks” the origin ratio of the video for different viewports would be awesome.

#9

After some research I had to realize that it’s not possible to manipulate the vimeo iframe to achive a full-screen solution. I made it now with the background-video widget. Thanks anyway @aaronocampo :v:

1 Like
#10

I came up with a solution for this. See this post: