vimeo-jquery-api - JQuery Plugins

Simple Vimeo API jQuery Plugin
An easy way to control Vimeo videos using standard jQuery event structure and methods.
Download
You can check out the entire repo, or download the latest release below (production files are in the dist folder):
jQuery Vimeo API v0.10.3 (zip)
jQuery Vimeo API v0.10.3 (tar.gz)
You can also link directly to the file using MaxCDN.

Setup
Make sure to include this plugin’s .js file after jQuery library. Use the minified version in dist folder for best performance.
This plugin works with iframe Vimeo embeds only. You can target the iframe using any normal jQuery CSS conventions, but often it’s easier to put an id attribute on the iframe to target it specifically.

Multiple videos
For multiple videos, it is recommended to include a query string to the end of the URL of your video with the variables api=1, and player_id=[unique_name] for each video, like so:
<br /> Because of a peculiarity with the way Vimeo sends messages, it’s impossible to tell which API messages we receive from Vimeo belong to any specific video on the page. The solution for this is to identify each video by appending a special query string identifier to each video’s URL.<br /> For convenience (and for CMS plugins) this plugin is designed to work without doing this; it will automatically append generic ids to the query strings of the Vimeo embeds on the page. But in doing so, there will be a brief reloading of the video at page load when it changes the src attribute. In order to prevent this, you should manually add your own.<br /> Dynamically Loading Videos<br /> When dynamically loading videos after page load, this plugin won’t capture them in the event chain. You will have to manually call a special method I added called .vimeoLoad() after appending your iframe, so it will be processed by the plugin.<br /> $(“<iframe />“) .attr(“id”, “myiframe”) .attr(“src”, “https://player.vimeo.com/video/128947850”) .appendTo(“body”) .vimeoLoad() //call this function after appending your iframe .vimeo(“play”);<br /> Again, vimeoLoad() is only required when dynamically adding videos after the fact. This is experimental, and worked in all my test. Please let me know if you have issues in the issue tracker.<br /> API Methods<br /> For methods, you can call API immediately with one argument as a string. For methods which take additional information<br /> $(“#myvideo”).vimeo(“play”);$(“#myvideo”).vimeo(“seekTo”, 5); //seeks to five seconds<br /> play<br /> $(“#myvideo”).vimeo(“play”);<br /> Plays videos as soon as this is called. Note for time sensitive presentations: this will wait until the video is ready and receives a ready message from Vimeo, so there might be a slight delay if playing right when the page loads.<br /> pause<br /> $(“#myvideo”).vimeo(“pause”);<br /> Will pause video at it’s current location.<br /> unload<br /> $(“#myvideo”).vimeo(“unload”);<br /> Equivalent to stop or rewind, as it reverts player back to original state.<br /> setVolume<br /> $(“#myvideo”).vimeo(“setVolume”, 0.5);<br /> Sets the volume of the video as a percentage from 0 to 1.<br /> setLoop<br /> $(“#myvideo”).vimeo(“setLoop”, true);<br /> Set looping to boolean value.<br /> seekTo<br /> $(“#myvideo”).vimeo(“seekTo”, 5);<br /> Seeks to specified number of seconds. (Does not work on mobile)<br /> setColor<br /> $(“#myvideo”).vimeo(“setColor”, “#333333”);<br /> Sets color of player to hex value as a string.<br /> Return Calls<br /> These are methods which return information about video. Because we need to contact Vimeo for information about the status of the video, the second argument needs to be a callback function. This also means, these calls will be asynchronous, and there might be a small delay.<br /> paused<br /> $(“#myvideo”).vimeo(“paused”, function(data){ console.log( “Is paused?”, data ); })<br /> Returns boolean showing whether video is paused.<br /> getCurrentTime<br /> $(“#myvideo”).vimeo(“getCurrentTime”, function(data){ console.log( “Current time”, data ); })<br /> Returns current play time as seconds. This is a one time return. For continuous updates, use playProgress event.<br /> getDuration<br /> $(“#myvideo”).vimeo(“getDuration”, function(data){ console.log( “Video length”, data ); })<br /> Return total duration of video in seconds.<br /> getVolume<br /> $(“#myvideo”).vimeo(“getVolume”, function(data){ console.log( “Volume is”, data ); })<br /> Return volume in seconds<br /> getVideoHeight or getVideoWidth<br /> $(“#myvideo”).vimeo(“getVideoHeight”, function(data){ console.log( “Height”, data ); })$(“#myvideo”).vimeo(“getVideoWidth”, function(data){ console.log( “Width”, data ); })<br /> Height or width as number.<br /> getVideoUrl<br /> $(“#myvideo”).vimeo(“getVideoUrl”, function(data){ console.log( “Video URL”, data ); })<br /> Get the url to the video itself as a string. (not the Vimeo page, but the actual video embed)<br /> getColor<br /> $(“#myvideo”).vimeo(“getColor”, function(data){ console.log( “Player color”, data ); })<br /> Color as string.<br /> API Events<br /> This plugin uses the standard jQuery notation for calling events.<br /> These will trigger when they happen. As with any event, you need to include a function callback.<br /> ready<br /> $(“#myvideo”).on(“ready”, function(){ console.log( “Vimeo is ready!” ); });<br /> Fires when the video is ready.<br /> play<br /> $(“#myvideo”).on(“play”, function(){ console.log( “Video is playing” );});<br /> Fires whenever the video is played.<br /> pause<br /> $(“#myvideo”).on(“pause”, function(){ console.log( “Video is paused” );});<br /> Fires whenever the video is paused.<br /> finish<br /> $(“#myvideo”).on(“finish”, function(){ console.log( “Video is done playing” );});<br /> Fires whenever the video is finished.<br /> loadProgress<br /> $(“#myvideo”).on(“loadProgress”, function(event, data){ console.log( data );});//{//”percent” : “0.326”,//”bytesLoaded” : “32159909”,//”bytesTotal” : “98650027”,//”duration” : “365.507”//}<br /> This will continuously return info as video is loading.<br /> playProgress<br /> $(“#myvideo”).on(“playProgress”, function(event, data){ console.log( data );});//{//”seconds” : “4.308”,//”percent” : “0.012”,//”duration” : “359.000”//}<br /> This will continuously return info as video is playing.<br /> seek<br /> $(“#myvideo”).on(“seek”, function(event, data){ console.log( data );});//{//”seconds” : “192.622”,//”percent” : “0.527”,//”duration” : “365.507”//}<br /> This will continuously return info as video is seeking.<br /> Chaining<br /> This plugin supports chaining any of the above items.<br /> $(“#myvideo”).vimeo(“play”) .vimeo(“getVolume”, function(d){ console.log(“volume”, d); }) .vimeo(“setVolume”, 0.5) .vimeo(“getVolume”, function(d){ console.log(“new volume”, d); }) .on(“pause”, function(){ console.log(“paused”); })<br /> Released under the MIT license</p> <p>http://opensource.org/licenses/MIT</p> <p>Changelog</p> <p>2016-05-05 v0.10.3 Major bug fix to events chain being called before iframe is loaded in some cases.<br /> 2016-04-09 v0.10.2 Created new vimeoLoad() method for dynamically loaded videos<br /> 2015-06-01 v0.10.1 Force https always. API calls don’t seem to work over http<br /> 2015-04-14 v0.10.0 Support for multiple videos automatically.<br /> 2015-03-09 v0.9.3 Fixed playProgress and loadProgress events due to capitalization issue.<br /> 2015-02-20 v0.9.2 Fixed Bower package, so it only installs js files.<br /> 2015-02-20 v0.9.1 Added package controls for bower, npm, and Grunt tasks.<br /> 2015-02-06 v0.9.0 Fixed window.location.protocol, which was missing a colon.<br /> 2014-12-25 v0.8.9 Fixed issue with Firefox, which didn’t recognize hasOwnProperty. Used for…in instead.</p> <p><a href="https://github.com/jrue/Vimeo-jQuery-API" target="_blank" rel="noopener"><strong>GitHub Repo</strong></a></p> <div class="crp_related "><h4>Related Plugins:</h4><ul><li><a href="https://jqueryplugins.net/2021/08/18/lazyloadxt/" class="crp_link post-167"><span class="crp_title">lazyloadxt</span></a><span class="crp_excerpt"> Lazy Load XT jQuery plugin Table of Contents About Download /…</span></li><li><a href="https://jqueryplugins.net/2021/08/18/lazyloadxt-amd/" class="crp_link post-217"><span class="crp_title">lazyloadxt-amd</span></a><span class="crp_excerpt"> Lazy Load XT jQuery plugin Table of Contents About Download /…</span></li><li><a href="https://jqueryplugins.net/2021/08/18/jquery-colorbox/" class="crp_link post-681"><span class="crp_title">jquery-colorbox</span></a><span class="crp_excerpt"> About Colorbox: A customizable lightbox plugin for jQuery. See the project…</span></li></ul><div class="crp_clear"></div></div> </div> </div> <div class="section-inner"> </div> <nav class="pagination-single section-inner" aria-label="Post" role="navigation"> <hr class="styled-separator is-style-wide" aria-hidden="true" /> <div class="pagination-single-inner"> <a class="previous-post" href="https://jqueryplugins.net/2021/08/18/jquery-secretnav/"> <span class="arrow" aria-hidden="true">←</span> <span class="title"><span class="title-inner">jquery.secretnav</span></span> </a> <a class="next-post" href="https://jqueryplugins.net/2021/08/18/jquery-cheat-code-plugin/"> <span class="arrow" aria-hidden="true">→</span> <span class="title"><span class="title-inner">jquery-cheat-code-plugin</span></span> </a> </div> <hr class="styled-separator is-style-wide" aria-hidden="true" /> </nav> </article> </main> <div class="footer-nav-widgets-wrapper header-footer-group"> <div class="footer-inner section-inner"> <aside class="footer-widgets-outer-wrapper" role="complementary"> <div class="footer-widgets-wrapper"> <div class="footer-widgets column-one grid-item"> <div class="widget widget_block"><div class="widget-content"> <div class="wp-container-1 wp-block-group"><div class="wp-block-group__inner-container"> <figure class="wp-block-image size-full"><a href="https://jmjwebdesign.com/" target="_blank"><img loading="lazy" width="300" height="50" src="https://jqueryplugins.net/wp-content/uploads/2021/08/jmj-website-design-new-logo-dark-bg-e1628722344245.png" alt="" class="wp-image-23"/></a></figure> </div></div> </div></div><div class="widget widget_block"><div class="widget-content"> <div class="wp-container-2 wp-block-group"><div class="wp-block-group__inner-container"></div></div> </div></div><div class="widget widget_block"><div class="widget-content"> <div class="wp-container-3 wp-block-group"><div class="wp-block-group__inner-container"></div></div> </div></div> </div> <div class="footer-widgets column-two grid-item"> <div class="widget widget_block widget_categories"><div class="widget-content"><ul class="wp-block-categories-list wp-block-categories"> <li class="cat-item cat-item-4"><a href="https://jqueryplugins.net/category/insights/">Insights</a> (5) </li> <li class="cat-item cat-item-6"><a href="https://jqueryplugins.net/category/plugins/">Plugins</a> (1,718) </li> <li class="cat-item cat-item-5"><a href="https://jqueryplugins.net/category/trends/">Trends</a> (1) </li> </ul></div></div> </div> </div> </aside> </div> </div> <footer id="site-footer" role="contentinfo" class="header-footer-group"> <div class="section-inner"> <div class="footer-credits"> <p class="footer-copyright">© 2022 <a href="https://jqueryplugins.net/">JQuery Plugins</a> </p> <p class="powered-by-wordpress"> <a href="/privacy-policy/">Privacy/Contact</a> </a> </p> </div> <a class="to-the-top" href="#site-header"> <span class="to-the-top-long"> To the top <span class="arrow" aria-hidden="true">↑</span> </span> <span class="to-the-top-short"> Up <span class="arrow" aria-hidden="true">↑</span> </span> </a> </div> </footer> <style>.wp-container-1 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-1 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-1 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style> <style>.wp-container-2 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-2 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-2 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style> <style>.wp-container-3 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-3 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-3 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style> <script src='https://jqueryplugins.net/wp-includes/js/dist/vendor/regenerator-runtime.min.js?ver=0.13.9' id='regenerator-runtime-js'></script> <script src='https://jqueryplugins.net/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0' id='wp-polyfill-js'></script> <script id='contact-form-7-js-extra'> var wpcf7 = {"api":{"root":"https:\/\/jqueryplugins.net\/wp-json\/","namespace":"contact-form-7\/v1"}}; </script> <script src='https://jqueryplugins.net/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.6.1' id='contact-form-7-js'></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> </body> </html>