JSFiddle - React, Tailwind, and code Playground

by Felipe Kautzmann

HTML

<div id="MusicHolder">
    <!--iframe width and height required to be>200px for proper playback functionality-->
    <iframe width="200" height="200" src="http://www.youtube.com/embed/dummy?enablejsapi=1"></iframe>
</div>

JavaScript

$(document).ready(function () {
    var _player = null;

    YT_ready(function () {
        var frameID = getFrameID("MusicHolder");
        if (frameID) {
            _player = new YT.Player(frameID, {
                events: {
                    "onReady": function () {
                        _player.loadVideoById("NSPFmjdTx8M");
                    },
                        "onError": function (error) {
                        alert(error.data);
                    }
                }
            });
        }
    });
});




// @description Easier way to implement the YouTube JavaScript API
// @author      Rob W
// @global      getFrameID(id) Quick way to find the iframe object which corresponds to the given ID.
// @global      YT_ready(Function:function [, Boolean:qeue_at_start])
// @global      onYouTubePlayerAPIReady()  - Used to trigger the qeued functions
// @website     http://stackoverflow.com/a/7988536/938089?listening-for-youtube-event-in-javascript-or-jquery

function getFrameID(id) {
    var elem = document.getElementById(id);
    if (elem) {
        if (/^iframe$/i.test(elem.tagName)) return id; //Frame, OK
        // else: Look for frame
        var elems = elem.getElementsByTagName("iframe");
        if (!elems.length) return null; //No iframe found, FAILURE
        for (var i = 0; i < elems.length; i++) {
            if (/^https?:\/\/(?:www\.)?youtube(?:-nocookie)?\.com(\/|$)/i.test(elems[i].src)) break;
        }
        elem = elems[i]; //The only, or the best iFrame
        if (elem.id) return elem.id; //Existing ID, return it     
        // else: Create a new ID
        do { //Keep postfixing `-frame` until the ID is unique
            id += "-frame";
        } while (document.getElementById(id));
        elem.id = id;
        return id;
    }
    // If no element, return null.
    return null;
}

// Define YT_ready function.
var YT_ready = (function () {
    var onReady_funcs = [],
        api_isReady = false;
    /* @param func...