JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<script src="//cdn.jsdelivr.net/jquery.tubeplayer/1.1.0/jQuery.tubeplayer.min.js"></script>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem nostrum consectetur incidunt sit nam eveniet necessitatibus ut tempora odio odit ratione suscipit cupiditate quia autem cumque numquam neque tempore.
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem nostrum consectetur incidunt sit nam eveniet necessitatibus ut tempora odio odit ratione suscipit cupiditate quia autem cumque numquam neque tempore.
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem nostrum consectetur incidunt sit nam eveniet necessitatibus ut tempora odio odit ratione suscipit cupiditate quia autem cumque numquam neque tempore.
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem nostrum consectetur incidunt sit nam eveniet necessitatibus ut tempora odio odit ratione suscipit cupiditate quia autem cumque numquam neque tempore.
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem nostrum consectetur incidunt sit nam eveniet necessitatibus ut tempora odio odit ratione suscipit cupiditate quia autem cumque numquam neque tempore.
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem nostrum consectetur incidunt sit nam eveniet necessitatibus ut tempora odio odit ratione suscipit cupiditate quia autem cumque numquam neque tempore.
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem nostrum consectetur incidunt sit nam eveniet necessitatibus ut tempora odio odit ratione suscipit cupiditate quia autem cumque numquam neque tempore.
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem nostrum consectetur incidunt sit nam eveniet necessitatibus ut tempora odio odit ratione suscipit cupiditate quia autem cumque...

CSS

#youtube-player-container{
    position:relative;
}
#youtube-player-container a{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

JavaScript

$("#youtube-player-container").tubeplayer({
	width: 600, // the width of the player
	height: 450, // the height of the player
	allowFullScreen: "true", // true by default, allow user to go full screen
	initialVideo: "uxUATkpMQ8A", // the video that is loaded into the player
	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
    onPlayerEnded: function(){},
    modestbranding: false,
    showControls:0,
});

$('.unmute').click(function(e){
    e.preventDefault();
    jQuery("#youtube-player-container").tubeplayer("unmute");
    $(this).hide();
    $('.mute').show();
});
$('.mute').click(function(e){
    e.preventDefault();
    jQuery("#youtube-player-container").tubeplayer("mute");
    $(this).hide();
    $('.unmute').show();
});


/**
 * Extend jquery with a scrollspy plugin.
 * This watches the window scroll and fires events when elements are scrolled into viewport.
 *
 * throttle() and getTime() taken from Underscore.js
 * https://github.com/jashkenas/underscore
 *
 * @author Copyright 2013 John Smart
 * @license https://raw.github.com/thesmart/jquery-scrollspy/master/LICENSE
 * @see https://github.com/thesmart
 * @version 0.1.2
 */
(function($) {

	var jWindow = $(window);
	var elements = [];
	var elementsInView = [];
	var isSpying = false;
	var ticks = 0;
	var offset = {
		top : 0,
		right : 0,
		bottom : 0,
		left : 0,
	}

	/**
	 * Find elements that are within the boundary
	 * @param {number} top
	 * @param {number} right
	 * @param {number} bottom
	 * @param {number} left
	 * @return {jQuery}		A collection of elements
	 */
	function findElements(top, right,...