jQuery Based Youtube/Vimeo/HTML5 Video Controller - Video.js

File Size: 16.3 KB
Views Total: 6578
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Based Youtube/Vimeo/HTML5 Video Controller - Video.js

A jQuery video plugin that provides useful methods and events to control Youtube, Vimeo, and HTML5 videos from JavaScript.

Basic usage:

1. Include jQuery library and the jQuery Video Controller plugin at the bottom of the html page.

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

2. Add your videos into the web page.

<iframe class="video" src="YOUTUBE/VIMEO VIDEO"></iframe>
<video class="video" controls="">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">

3. Initialize the plugin and we're ready to go.

  // options
  attr_ready: 'data-video-ready',
  attr_playing: 'data-video-playing',
  attr_paused: 'data-video-paused',

4. Play all videos.


5. Pause all videos.


6. Stop all videos.


7. Restart all videos.


8. Mute all videos.


9. Unmute all videos.


10. Seek to 20 sec.


11. Add events to videos.

$('.video').addVideoEvent('ready', function(e, $video, video_type) {
  // Triggers if a video is ready.

$('.video').addVideoEvent('play', function(e, $video, video_type) {
  // Triggers on play or resume

$('.video').addVideoEvent('pause', function(e, $video, video_type) {
  // Triggers on pause

$('.video').addVideoEvent('finish', function(e, $video, video_type) {
  // Triggers if a video is finished

$('.video').addVideoEvent('destroy', function(e, $video, video_type) {
  // Triggers if the plugin is destroyed

12. Global settings.

// The suffix for all the video events (for unique purposes)
$.video.event_suffix = '_video';

// An array with callbacks for the onYouTubeIframeAPIReady() call
$.video.youtube_api_ready_callbacks = [],

// The youtube iframe api url
$.video.youtube_iframe_api = 'https://www.youtube.com/iframe_api'


v0.1.4 (2023-03-08)

  • fix for missing video configuration

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