CODEWITHSUNDEEP
javascriptjqueryvideovimeofroogaloop
Thomas Crossman
Thomas Crossman

Reputation: 65

Controlling Multiple Vimeo Embeds using API coming from CMS

I'm having a bit of trouble getting multiple Vimeo video embeds to play nicely on a site I'm building. You can see the site here:

http://bruprodu.nextmp.net/

On this page (the homepage), when you click on the play button the Vimeo embed fades in and starts playing. I achieved this easily enough by using:

  var iframe = $('.showreel-vid')[0],
  player = $f(iframe);
  $(".indexHome .vimeo").on('click', function(e){
      e.preventDefault();      
      $('.showreel-vid').fadeIn();
      player.api('play');
  });

My problem is on this page:

http://bruprodu.nextmp.net/work

As you can see I have multiple Vimeo embeds, all controlled by a CMS. Obviously when I do the same as the above it kind of freaks out because it's all looking at the first Vimeo embed. Ideally, what I would like to happen is:

I've read a bunch of stuff about controlling the Vimeo embed using player_id, but without re-writing a bunch of my CMS (and also relying on the site admin to put in a player id) I don't have control of the player_id string in the embed, so ideally I need a front-end solution.

Does anyone have any pointers as to how I can solve this--just hints/tips/advice is awesome--and if you need any further info or code examples, let me know.

Thanks a lot!

Upvotes: 0

Views: 728

Answers (1)

jrue
jrue

Reputation: 2560

This can be done entirely with JavaScript/jQuery. I don't use froogaloop, but it's probably a good idea given it's what Vimeo recommends. Here are some functions without froogaloop which work.

function pauseAllVideos(){
    $('iframe').each(function(elm){
        if($(this).attr('src').match(/vimeo/ig))
            $(this)[0].contentWindow.postMessage(JSON.stringify({ method: 'pause' }), $(this).attr('src').split('?')[0]);
    });
}

//uses CSS selector id
function playVimeoVideo(id){
    $(id)[0].contentWindow.postMessage(JSON.stringify({ method: 'play' }), $(id).attr('src').split('?')[0]);
}

//example of calling both functions after some button is clicked
$("#somebutton").on('click', function(){
    pauseAllVideos();
    playVimeoVideo("#somevideo");
})

Upvotes: 2

Related Questions