Vimeo 播放器在后台全屏显示

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>

Answer 1

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;
}

Answer 2

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