add loop button on youtube video

loop_youtube.js

/**
 * Note: this code is copied from Casey Chu( bitsofpancake )'s repo:  https://github.com/bitsofpancake/youtube-loop-video
 * and minorly changed ( remove the style block, set looping default to true ).
 *
 * How to use the code: when you are on a youtube video page and want to loop this video,
 * just create a snippet in chrome dev tool ( developer tools > source > snippets )
 * copy this code into the snippet, and run it!
 *
 * The code will create a "loop" button in the UI, and by default it will set to loop the video,
 * you can toggle the button to enable/disable looping.
 */

// Step1: add a "loop" button in the UI
var button = document.createElement('span');
button.innerHTML =
	'<button \
		id="watch-loop" \
		class="yt-uix-button yt-uix-button-text yt-uix-tooltip yt-uix-button-size-default yt-uix-button-opacity" \
		type="button" \
		title="Loop this video" \
		data-orientation="vertical" \
		data-position="bottomright" \
		data-button-toggle="true" \
		data-tooltip-text="Turn off looping" \
		role="button"> \
			<span class="yt-uix-button-content">Loop </span> \
	</button>';

// Make sure we are on video playing page, and the loop button has not been added yet
if ( document.getElementById('watch8-secondary-actions') && !document.getElementById( 'watch-loop' ) ) {
  document.getElementById('watch8-secondary-actions').appendChild(button);
}

// Utility function: inject script to the page's global scope
function inject(fn) {
	var script = document.createElement('script');
	script.innerHTML = '(' + fn.toString() + ')();';
	document.body.appendChild(script);
}

// Step2: This function listens for the video ending and restarts it if we're looping. Inject
// it into the page. Note that we can't access any variables outside the function here.
inject(function () {

	// Controls whether we're looping, default is true
	var looping = true;

	// Listen for the button click.
	document.getElementById('watch-loop').onclick = function () {
		looping = !looping;
		this.setAttribute('data-tooltip-text', looping ? 'Turn off looping' : 'Loop this video');
		return false;
	};

	// Returns the player API interface or false if it's not ready.
	function getPlayer() {
		return window.yt.player
			&& window.yt.player.getPlayerByElement
			&& window.yt.player.getPlayerByElement(document.getElementById('player-api'));
	}

	// Listen for the end of the video.
	function attach() {
		var player = getPlayer();
		player.addEventListener('onStateChange', function (state) {
			if (state == '0' && looping)
				player.playVideo();
		});
	}

	// Wait until the YouTube API's ready.
	function wait() {
		setTimeout(getPlayer() ? attach : wait, 100);
	}

	wait();
});