Geek Answers Handbook

Pause Vimeo universal insert when hiding using jQuery

I have a Vimeo video (via a universal built-in iframe) hidden on my page. Clicking on the link fades out and clicking outside the video (lightbox style) disappears and hides it, but the video continues to play. I read in the Vimeo API that you can use JSON objects to pause videos, but I don’t understand what they say.

HTML:

<img id="show_tide" class="vid" src"#"> <i<iframe id="tide" class="vim" src="http://player.vimeo.com/video/1747304?portrait=0&amp;color=ffffffapi=1" width="726" height="409" frameborder="0"></iframe>

JavaScript:

 $('#underlay').click(function() { //pause VISIBLE (there are multiple) Vimeo video via API $('.vim, #underlay').fadeOut(400); });
+8
json jquery api vimeo froogaloop
source share
4 answers

You need to add froogaloop from one of the libraries .

Js

 player=$f(document.getElementById('tide'));// you can use jquery too: $('#tide')[0] player.api('pause');

Pretty simple. Here is an example on jsfiddle.net .

+17
source share

I wanted to add a play / pause button like this without using jquery or froogaloop. I don’t know why, but I hate turning on the library when I don’t need it. Especially for simple things like this.

Here is what I came up with (I'm just posting this to other people who are looking):

 <!DOCTYPE HTML> <html> <head> <title>Vimeo Test</title> <script language="JavaScript"> var iFram, url; function startitup(){ iFram = document.getElementById('theClip'); url = iFram.src.split('?')[0]; } function postIt(action, value) { var data = { method: action }; if (value) { data.value = value; } if(url !== undefined){ iFram.contentWindow.postMessage(JSON.stringify(data), url); } } </script> </head> <body onload="startitup();"> <iframe id="theClip" src="http://player.vimeo.com/video/27855315?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen> </iframe> <p><button onclick="postIt('play');">Play</button> <button onclick="postIt('pause');">Pause</button></p> </body> </html>
+5
source share

Here is a simple way to pause Vimeo video from an external HTML element that worked for me using libgroogaloop:

 var iframe = $('.video')[0]; var player = $f(iframe); $('.button').bind('click', function() { player.api('pause'); });
+1
source share

I'm a bit late to the party, but I had to download froogaloop , jquery, and the Vimeo API.

be sure to add ?api=1&player_id='frame' to the end of the embedded video ?api=1&player_id='frame'

My code looked something like this after

 <iframe id="frame" src='http://player.vimeo.com/video/199114019?api=1&player_id='frame''></iframe> $(document).ready(function() { $('.nameofyourclass').click(function() { $f($('#frame')[0]).api('pause'); }); });
0
source share

More articles:


All Articles