JSFiddle - React, Tailwind, and code Playground

by nerdess

HTML

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<a href="http://vimeo.com/34583779" class="video vimeo" data-width=540 data-height=301>Harold &amp; Maude</a>
<a href="http://vimeo.com/11869335" class="video vimeo" data-width=540 data-height=301>Cat Stevens</a>

JavaScript

//vimeo videos
var vimeo = {
    videos: [],
    init: function (element, i) {
        
      var videoData = {
            'title': $(element).html(),
            'id': 'video-' + i,
            'url': $(element).attr('href')
        };

        $.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoData.url) + '&api=1&player_id='+ videoData.id +'&width=300&callback=?', function(data){
        
        $(element).html(data.html);
        $(element).find('iframe').load(function(){
                player = this;
                $(player).attr('id', videoData.id);
                $f(player)
                .addEvent('ready', function(player_id){
                    vimeo.videos.push($f(player_id));
                })
                .addEvent('play', function(player_id){
                    $(vimeo.videos).each(function(j){
                        if(player_id != $(this.element).attr('id')) this.api('pause');
                    });
                });
            });
        });
    }
}
      

$(document).ready(function () {
    $('a.vimeo').each(function(i) {
        vimeo.init(this, i);
    });
});