Search code examples
javascriptjqueryvimeo

Vimeo player fullscreen in background

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>
Solution

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