Easy HTML5 & Youtube Video Background Plugin - container.player
File Size: | 22.1 KB |
---|---|
Views Total: | 5983 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.