JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper"><h1> Test world</h1></div>
CSS
width: 100%;
height: 250px;
border: 1px solid red;
}
JavaScript
/* jQuery tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* version: 1.0
|* updated: October 1, 2012
|* since 2010
|* licensed under the MIT License
|* Enjoy.
|*
|* Thanks,
|* Sean */
//modified tubular library, to support multiple calls to tubular and videoFinished callback //
(function ($, window) {
// test for feature support and return if failure
// defaults
var defaults = {
ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed
videoId: 'ZCAnLxRvNNc', // toy robot in space is a good default, no?
mute: true,
repeat: true,
width: $(window).width(),
wrapperZIndex: 99,
playButtonClass: 'tubular-play',
pauseButtonClass: 'tubular-pause',
muteButtonClass: 'tubular-mute',
volumeUpClass: 'tubular-volume-up',
volumeDownClass: 'tubular-volume-down',
increaseVolumeBy: 10,
start: 0,
playercount: 1,
videoFinished: function () {}
};
// methods
var options = null; // options
var tubularOnceCalled = false;
window.player = null;
var tubular = function(node, paramOptions) { // should be called on the wrapper div
options = $.extend({}, defaults, paramOptions),
$body = $(node) // cache body node
$node = $(node); // cache wrapper node
// set up iframe player, use global scope so YT api can talk
var loadAVideo = function() {
player && player.destroy();
player = new YT.Player('tubular-player' + options.playercount , {
width: options.width,
height: Math.ceil(options.width / options.ratio),
videoId: options.videoId,
playerVars: {
iv_load_policy: 3,
controls: 0,
showinfo: 0,
modestbranding: 1,
wmode: 'transparent'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
if(tubularOnceCalled) {
loadAVideo();
return;
}
tubularOnceCalled = true;
// build container
var tubularContainer = '<div id="tubular-container' + options.playercount + '" style="overflow: hidden;...