HTML5 Background Player For Vimeo Videos - mb.vimeoPlayer

mb.vimeoPlayer is a jQuery HTML5 video background plugin which allows you to insert a responsive, fully controllable Vimeo video player as the background of any container element.

See also:

• Awesome Video background Plugin with HTML5 and youtube API - YTPlayer

How to use it:

1. Load the latest version of jQuery library and the jQuery mb.vimeoPlayer.js plugin's files in your html page.

<link href="jquery.mb.vimeo_player.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.mb.vimeo_player.min.js"></script>

2. Insert a Viemo video player into the page as this:

<a id="bgndVideo" class="player" 
   data-property="{videoURL:'https://vimeo.com/VIDEO-ID'}">
   My video background
</a>

3. Call the function to initialize the Vimeo video player with default settings.

myPlayer = $("#bgndVideo").vimeo_player();

4. All default settings which can be passed to the vimeo_player() method or via data-property attribute as shown above.

$("#bgndVideo").vimeo_player({
  containment: "body",
  ratio: "16/9", // "auto", "16/9", "4/3"
  videoURL: null,
  quality: "1080p", //4K, 2K, 1080p, 720p, 540p, 360p and 240p
  startAt: 0,
  stopAt: 0,
  autoPlay: true,
  vol: 50, // 1 to 100
  addRaster: false,
  opacity: 1,
  mute: false,
  loop: true,
  showControls: true,
  show_vimeo_logo: true,
  stopMovieOnBlur: true,
  realfullscreen: true,
  mobileFallbackImage: null,
  gaTrack: true,
  optimizeDisplay: true,
  mask: false,
  align: "center,center", // top,bottom,left,right
  onReady: function( player ) {}
});

5. Available methods to control the Vimeo video player.

// play the video
myPlayer.v_play()

// pause the video
myPlayer.v_pause()

// set to fullscreen
myPlayer.v_fullscreen()

// set  the volume
myPlayer.setVolume(20)

// mute the video
myPlayer.v_mute()

// unmute the video
myPlayer.v_unmute()

// toggle the volume
myPlayer.v_toggleVolume()

// set the alignment
myPlayer.setAlign('top,right')

6. Events.

myPlayer.on("VPReady",function(e){
  // When the video is ready
});

myPlayer.on("VPStart",function(e){
  // When the video start playing
});

myPlayer.on("VPProgress",function(e){
  // Fired every 200 ms when the video is in progress
});

myPlayer.on("VPPlay",function(e){
  // Each time the video changes from pause to play
});

myPlayer.on("VPPause",function(e){
  // When the video pauses
});

myPlayer.on("VPEnd",function(e){
  // When the video ends
});

myPlayer.on("VPFullScreenStart",function(e){
  // When the video goes fullscreen
});

myPlayer.on("VPFullScreenEnd",function(e){
  // When the video exits fullscreen
});

myPlayer.on("VPMuted",function(e){
  // When the video is muted
});

myPlayer.on("VPUnmuted",function(e){
  // When the video is unmuted
});

myPlayer.on("VPTime",function(e){
  // Fired every seconds
});

Changelog:

v1.2.0 (2021-01-10)

• Added the quality parameter available for PRO and PLUS users

v1.2.0 (2020-11-27)

• Bug fix: With the new Mac OS update (Big Sur) the browser user agent has changed and the os verification was firing a blocking bug.

2019-06-21

• v1.1.9

2018-06-11

• v1.1.8: Mobile copatibility

2018-05-24

• v1.1.7: reduced the start time at 1150ms

2018-01-22

• v1.1.6: Updated resize behavior to fix the flickering

2018-01-18

• v1.1.4

2018-01-16

• v1.1.3

2017-11-08

• v1.1.2: Bug fix: the v_change_movie was not working

2017-11-01

• v1.1.1

2017-10-31

• player size fix

2017-09-05

• v1.0.2

2017-06-24

• iOs fix

2017-06-01

• Release v1.0.11 stable

2017-05-12

• OS detection for mobile fix

2017-05-11

• Release v1.10.0 stable

2017-04-19

• Bug fix: At video start the audio was on for 1 sec. also if the mute option was set to true.

2017-04-12

• Bug fix: the audio was there for the first second even if mute was set to true

2017-04-11

• Release v1.0.7 stable

2017-03-28

• Added event VPProgress

2017-03-22

• Release v1.0.6 stable

2017-03-21

• Release v1.0.5 stable

 

---

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