JSFiddle - React, Tailwind, and code Playground

by michapixel

HTML

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script src="https://github.com/nirvanatikku/jQuery-TubePlayer-Plugin/blob/master/jQuery.tubeplayer.min.js"></script>
<div id="Videosection">
    <div class="videoplayer"></div>
</div>
<button>Hide me</button>

CSS

#Videosection {
    width:404px;
    height:295px;
    border:1px solid red;
}

JavaScript

$('#Videosection .videoplayer').tubeplayer({
    width: 404, // the width of the player
    height: 295, // the height of the player
    allowFullScreen: "true", // true by default, allow user to go full screen
    initialVideo: 'hcfPX8rH9tg', // the video that is loaded into the player
    autoPlay:false,
    iframed:true,
    modestbranding:false,
    showRelated:0,
    showinfo:false,
    loadSWFObject:true,
    swfobjectURL: "http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js",
    preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
    onPlay: function(id){}, // after the play method is called
    onPause: function(){}, // after the pause method is called
    onStop: function(){}, // after the player is stopped
    onSeek: function(time){}, // after the video has been seeked to a defined point
    onMute: function(){}, // after the player is muted
    onUnMute: function(){}, // after the player is unmuted
    onPlayerUnstarted:function() {
        
    }
});

/*
$('button').delegate('click', function() {
    $('#Videosection')
        .stop(true, true)
        .animate({opacity:0}, 350)
        .delay(1000)
        .animate({opacity:1}, 350);
});
*/