Easy HTML5 & Youtube Video Background Plugin - container.player

container.player is a simple-to-use jQuery plugin that allows you to set any HTML5 or Youtube video as a responsive background for a specified container or the whole page.

How to use it:

1. You need to include the latest version of jQuery library in your page BEFORE using this plugin.

<script src="/path/to/jquery.slim.min.js"></script>

2. Download and include the jQuery container.player plugin's CSS & JS files in the webpage.

<script src="container.player.min.js"></script>
<link href="container.player.min.css" rel="stylesheet" />

3. Call the function on the target container and specify the video you want to play.

$('#player').ContainerPlayer({
  youTube: {  
    videoId: 'VIDEO ID',
    poster: 'poster.jpg',
  },
});

// or html5 video
$('body').ContainerPlayer({
  html5: { 
    src: 'video.mp4',
    poster: 'poster.jpg',
  }
})

4. Config the plugin with the following settings.

$('#player').ContainerPlayer({
  autoplay: true,
  loop: true,
  muted: true,
  controls: false,
  ratio: 16 / 9,
  fitContainer: true,
  forceAspect: false,
});

5. Events.

$('#player').ContainerPlayer({
  // options here
})
.on('video.playing video.paused video.loaded video.ended player.resized', function() {
  // do something
});

Changelog:

v0.9.2 (2019-12-06)

• Fix to emit the 'playing' event using the Vimeo adapter on mobile devices.

2016-10-21

• Added volume & muting support.

2016-09-01

• added 'destroy' method.
• added player.resized event

---

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