how to play and stop Vimeo video in iframe when click

Html =============

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

<iframe id="vimeo-player" src="http://player.vimeo.com/video/40977539?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<a id="stop" href="#">STOP</a>
<a id="play" href="#">PLAY</a>

Jquery ===========

var iframe = $('#vimeo-player')[0];
var player = $f(iframe);

$('#stop').click(function() {
    alert('stoped');
    player.api('pause');
});


$('#play').click(function(){
    alert('play');
    player.api('play');
})

=================================================

Example - http://jsfiddle.net/zimm/8CV2S/14/

Comments

Post a Comment

Popular posts from this blog

Pagination of multiple recent post blog

<div class="blog-section">   <div class="blog-listing-wrapper cell-wrapper">     <div class="post-listing clearfix">       {% set blog_one_posts = blog_recent_posts('6126215542', 200) %} <!-- sets a variable for a the 5 most recent posts of my default COS blog -->       {% set blog_two_posts = blog_recent_posts('6126300566', 200) %}  <!-- sets a variable for a the 5 most recent posts of my blog id 47082700. You can find the blog id in the URL of the blog dashboard for a particular blog-->       {% set blog_three_posts = blog_recent_posts('6130453958', 200) %}       {% set blog_four_posts = blog_recent_posts('6131348719', 200) %}       {% set all_posts = (blog_one_posts + blog_two_posts + blog_three_posts + blog_four_posts) | sort(true, false, 'publish_date')  %} <!-- combines the two variables into a single variable and sorts them by publish date. Please note the sort filter r
Read more

Service Filter

Image
https://www.awesomescreenshot.com/video/3075020?key=60ee7802b59aa9042128db94c23ecc2f {{ module.title }} + Add Filter All Services {% for item in module.service_type %} {{ item.Title }} {% endfor %} Cancel Apply Filters {% for item in module.service_type %} {{ item.Title }} {% for item2 in item.services %} {% if item2.image_field.src %} {% set sizeAttrs = 'width="{{ item2.image_field.width }}" height="{{ item2.image_field.height }}"' %} {% if item2.image_field.size_type == 'auto' %} {% set sizeAttrs = 'style="ma
Read more

When You Want to open popup(first time load)

$(document).ready(function() {    if (localStorage.getItem("popState") != "shown") {        $('.service_modal_box').fadeIn();        localStorage.setItem("popState", "shown")    }    $(".sqs-popup-overlay-close").click(function(a) {        $(".service_modal_box").fadeOut()    }); });
Read more