Vimeo player fullscreen in background

Question

I have used this code to put my vimeo video in background that autoplays.

I found away to do this via css, however it only works in the console, but I can't seem to make work when I use my css file. I can't access inside the iframe through css.

Is there a easy way I can do this method via the iframe url to make it full length and responsive?

Code

<iframe src="https://player.vimeo.com/video/76979871?background=1" width="100%" height="450" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Might be helpful article -- [Can I create custom settings for all my embedded videos](https://vimeo.com/help/faq/sharing-videos/embedding-videos#can-i-create-custom-settings-for-all-my-embedded-videos) — aug, Mar 01 '16 at 17:54

score 3 · Accepted Answer · edited May 23 '17 at 10:28

3

Here is a fiddle of a responsive background video. I adapted the CSS from this answer to make the video responsive.

To make it a background, I added this:

.videowrapper {
  /* ... */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

edited May 23 '17 at 10:28

Community

1
1

answered Mar 14 '16 at 19:48

Andrew Myers

2,754
5
32
40

score 0 · Answer 2 · answered Jun 23 '22 at 13:21

0

Just to clarify, to use the official Vimeo solution of adding the parameter background=1 to the video url, you do need to be paying for Vimeo Plus.

Ref: https://vimeo.zendesk.com/hc/en-us/articles/224969968-Embedding-videos-overview

answered Jun 23 '22 at 13:21

AdamJones

652
1
15
38

Vimeo player fullscreen in background

2 Answers2