JSFiddle - React, Tailwind, and code Playground
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("UfESt2KdOdc");
}
,
"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.
...