JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<div id="output"></div>

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    <div id="ytapiplayer">
        You need Flash player 8+ and JavaScript enabled to view this video.
    </div>
    <div id="moogaloop" style="width: 504px; height: 340px;"></div>

CSS

#output {color: #FFF; display: block; font-weight: bold; padding: 0.5em; font-family: Arial, sans-serif;}
#output.success {background: green; margin-bottom: 1em;}

JavaScript

// YouTube player rendering
var params = {
    allowscriptaccess: 'always',
    allowfullscreen: 'true'
};
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/e/Z0AXjUy1_gY?enablejsapi=1&playerapiid=ytplayer", "ytapiplayer", "640", "345", "8", null, null, params, atts);

// Vimeo player rendering
        var video_id = 4632707;
        var moogaloop = false;

        // Run the javascript when the page is ready
        var swf_id = 'moogaloop';

         var vimeoFlashvars = {
            clip_id: video_id,
            show_portrait: 1,
            show_byline: 1,
            show_title: 1,
            js_api: 1, // required in order to use the Javascript API
            js_onLoad: 'vimeo_player_loaded', // moogaloop will call this JS function when it's done loading (optional)
            js_swf_id: 'moogaloop' // this will be passed into all event methods so you can keep track of multiple moogaloops (optional)
        };
        var attributes = {};

        swfobject.embedSWF("http://vimeo.com/moogaloop.swf", swf_id, "504", "340", "9.0.0","expressInstall.swf", vimeoFlashvars, params, attributes);


// youtube callback
function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
    if(!newState) {
        finished('YouTube');
    }
}

// vimeo callbacks
function vimeo_player_loaded(swf_id) {
    moogaloop = document.getElementById('moogaloop');
    moogaloop.api_addEventListener('onFinish', 'vimeo_on_finish');
}

function vimeo_on_finish(swf_id) {
    finished('Vimeo');
}


// our own callback
var output = $('#output');
function finished(playerName){
    output.attr('class', 'success').append('<p>' + playerName + ' Completed</p>');
}