Custom Vimeo Video Background Plugin with jQuery - Vimeofy

Custom Vimeo Video Background Plugin with jQuery - Vimeofy
File Size: 584 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Vimeofy is a simple, lightweight jQuery plugin which uses a Vimeo video as the background of any container element.

See also:

How to use it:

1. First you need to load the jQuery vimeofy plugin after you've loaded jQuery library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="scripts/vimeofy.js"></script>

2. Call the function on the target container and specify a Vimeo video for the background.

$( '#background' ).vimeofy({
  'url': 'https://vimeo.com/122622147'
});

3. Add a background image to the container that will be severed as a fallback for the Vimeo video.

#background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url( 'poster.jpg' );
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  z-index: -10;
}

4. All available settings.

$( '#background' ).vimeofy({
  'url': 'https://vimeo.com/122622147',
  'color': '#00D8D8',
  'autoplay': true,
  'loop': true,
  'delay': 5000,
});

This awesome jQuery plugin is developed by FlipFlopInteractive. For more Advanced Usages, please check the demo page or visit the official website.