Easy HTML5 & Youtube Video Background Plugin - container.player

File Size: 22.1 KB
Views Total: 6038
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.