Menu
I have a Vimeo video (via universal embed iframe) hidden on my page. Clicking a link fades it in, and clicking outside of the video (lightbox-style) fades it out and hides it - but the video keeps playing. I read on Vimeo's API that you can use JSON objects to pause the video, but I don't understand what they're saying.
HTML:
<img id="show_tide" class="vid" src"#">
<i<iframe id="tide" class="vim" src="http://player.vimeo.com/video/1747304?portrait=0&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);
});
771
You need to add from one of the froogaloop libraries.
JS
player=$f(document.getElementById('tide'));// you can use jquery too: $('#tide')[0]
player.api('pause');
Annoyingly simple. Here's an example on jsfiddle.net.
139
I wanted to add a play/pause button like this without using jquery or froogaloop. I don't know why but, I hate including a library when I don't have to. Especially for simple things like this.
Here's what I came up with (I'm just posting this for other people who are searching) :
<!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>
Here's a simple way to pause a Vimeo video from an external HTML element that worked for me, using the froogaloop libray:
var iframe = $('.video')[0];
var player = $f(iframe);
$('.button').bind('click', function() {
player.api('pause');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
