jQuery Plugins › jQuery Other Plugins › jQuery Vide

Responsive Full Page Video Background Plugin with jQuery - Vide

File Size: 5.12 MB
Views Total: 26318
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE9+, FireFox, Opera, Safari#background#video background
Responsive Full Page Video Background Plugin with jQuery - Vide

Yet another jQuery plugin for creating an Html5 video background that is responsive to fit within any container.

Check out the Fullscreen example here.

See also:

How to use it:

1. Download and include the jQuery vide plugin after jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="src/jquery.vide.js"></script>

2. Use data-vide-bg attribute to specify the video path without extension. Make sure the video and poster have the same name.

  • video/ocean.jpg: Poster
  • video/ocean.mp4: For IE, Chrome, Firefox and Safari
  • video/ocean.ogv: For Chrome and Opera
  • video/ocean.webm: For Chrome, Firefox and Opera
<body data-vide-bg="video/ocean">
<!-- OR -->
<div data-vide-bg="video/ocean">

3. Available settings. You can also pass the options via data-vide-options in the container element.

volume: 1,
playbackRate: 1,
muted: true,
loop: true,
autoplay: true,

// Similar to the CSS `background-position` property.
position: "50% 50%", 

// Poster image type. 
// "detect" — auto-detection; 
// "none" — no poster; "jpg", "png", "gif",... - extensions.
posterType: "detect", 

// Auto-resizing
resizing: true // Auto-resizing,

// background color
bgColor: 'transparent',

// additional CSS class
className: ''
});

Change logs:

v0.5.1 (2016-11-06)

  • Remove deprecated jQuery load method.

v0.5.0 (2016-01-14)

  • Add the className option.

v0.4.1 (2015-10-13)

  • Fix hidden video.

v0.4.0 (2015-10-11)

  • Add bgColor property.
  • Fix a blurred circle on IOS9.
  • Update dependencies.

v0.3.7 (2015-08-12)

  • Fix the 'Not implemented' error in IE.

v0.3.6 (2015-08-08)

  • Rename 'video/ogv' type to 'video/ogg'.
  • Correct the docs.
  • Remove moot version property from bower.json.
  • Update linter configs.
  • Update dependencies.

v0.3.5 (2015-05-29)

  • Fixed disappearing of the poster image in Android 5.

v0.3.4 (2015-05-02)

  • Updated Meteor documentation.
  • Refactoring.
  • Updated dependencies.

v0.3.3 (2015-04-19)

  • Added Browserify support.
  • Removed the checking of User-Agent.
  • Fixed issues of the back/forward cache in Safari.
  • Updated Meteor integration.
  • Updated dependencies.

v0.3.2 (2015-04-18)

  • Added support of old FF versions.
  • Improved Safari playback fixes.
  • Updated dependencies.
  • Add browserify support.

v0.3.1 (2015-02-23)

  • Fixed a flash.
  • Fixed Safari playback bugs.
  • Used package.json instead of vide.jquery.json.
  • Used '#on' instead of '#bind'.
  • Imporved the codestyle.
  • Updated dependencies.

v0.3.0 (2014-11-15)

  • Added the resizing option.

v0.2.1 (2014-11-10)

  • Code refactoring.
  • Updated devDependencies.

v0.2.0 (2014-10-27)

  • Lots of updates since 0.1.0.
  • Improved code linting.
  • Cleaned up the repository.
  • Added bower dependencies.
  • Updated devDependencies.

v0.1.4 (2014-10-20)

  • Fixed wrong URL parsing.
  • Changed main files in bower.json.

v0.1.3 (2014-10-04)

  • Path argument can receive list of sources.
  • Strings with options and pathes can be passed to the constructor directly.
  • Updated README.
  • Updated JSDoc.
  • Updated tests.
  • Updated examples.
  • Added CONTRIBUTING.md
  • Other small fixes and optimizations.

v0.1.2 (2014-09-01)

  • Restored posterType option to specify poster image type.

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