Avvio

Avvio Plus

Hi there, sorry is this is something that has been asked on previous forums but I am working on a new site and am trying to achieve a fullscreen background video similar to this dromoland.ie/ but using a Vimeo embed.

As you can see no matter now you scale the browser window the video fills the screen and stays centered. I can embed using Vimeo in a fullscreen HTML format with little problem but I am left with the black borders depending on the aspect ratio of a given screen / the resolution of the monitor.

Just to clarify I am not overly concerned if the video is cropped slightly on some screens, so long as there are no borders and the video fills the entire space. I see the above example uses a Flash embed which is an option but I wanted to see if there was a means of just using the Vimeo API so it delivers seamlessly to mobile devices and retains the quality / download speed (Dromoland example is quite pixellated). I will also be positioning HTML items above the video.

Any help whatsoever on this would be appreciated!

Soxiam

Soxiam Staff

This will be difficult since our player doesn't allow elements to be overlayed on top and we don't allow direct access to the media file.

Avvio

Avvio Plus

Heya, thanks for the reply!

Just as a quick test I put together the following using a video from the Vimeo HD channel: avvio-design.com/vimeo-test/

As you can see the video is running in the fullscreen with some HTML elements in place over it (not very compatible with early IE browsers, this is just a very quick test).

On certain resolutions / aspect ratios the video fills the entire area but when you go down to 1024x768 or there abouts black bars appear to the top & bottom or left & right, depending on the given aspect ratio.

What I am trying to achieve is that, rather than these black bars appearing, the video is cropped on the T&B or L&R with the center appearing in the middle of the screen.

Has anyone done something similar or is this something that can be added to a Vimeo feed via another method?

Thanks a million for taking the time to look at this!

Avvio

Avvio Plus

Bump on this, just wanted to see if anyone had any ideas on the above?

nick

nick

Avvio, could you tell me how you got that video to play in the background? Possibly share your code?

I'm a designer using Adobe Muse and think it would be awesome if I could do that

Drew Baker

Drew Baker

What Avvio is asking for is similar to the way CSS treats images with "background-size: cover" and Flash's scale mode for video "stretching: 'fill'.

This should be something easy for Vimeo to enable when the video is playing in Flash mode. It's not possible in HTML5 video players.

UKfilmNet

UKfilmNet Plus

SO just to be clear this WONT work in non HTML 5 contexts (ie all mobile and tablet video?) THis is a *flash* only solution?

This conversation is missing your voice. Please join Vimeo or log in.