video background

	<!--                         -->
	<!--                         -->
	<!--        Background       -->
	<!--                         -->
	<!--                         -->
<div id="MainPage" style="display:none;">

<!-- Script for the background video! -->
<div class="video-background" style="z-index:-99">
<div id="player"></div>
			<script>
  // misc, i dont know what these are for but i should find out. \\
  ;
  (function (window, document, undefined) {
    'use strict';
    function removeElement(array, element) {
      return array.filter(function (el) {
        return el !== element
      }
                         );
    }
    // Create function to randomize video based off playlist thing ill make at the end. \\
    function changeVideo() {
      if (player.getCurrentTime() >= delay) {
        var currentVideo = player.getVideoData().video_id,
            randomVideo = removeElement(videoPlaylist, currentVideo)[Math.floor(Math.random() * (videoPlaylist.length - 1))];
        player.loadVideoById(randomVideo);
      }
    }
    // Function that runs when the video changes to another one. \\
    /** Event Data Types
    						-1 (unstarted)
    						0 (ended)
    						1 (playing)
    						2 (paused)
    						3 (buffering)
    						5 (video cued)
    					**/
    function onPlayerStateChange(event) {
      clearInterval(repeat);
      if (event.data === 0) {
        repeat = setInterval(changeVideo, 0);
      }
    }
    // 3. This function creates an <iframe> (and YouTube player) \\
    //    after the API code downloads. \\
    window.onYouTubeIframeAPIReady = function () {
      var randomVideo = videoPlaylist[Math.floor(Math.random() * videoPlaylist.length)];
      player = new YT.Player('player', {
        // width and height here dont matter, its set in the CSS to be fullscreen dynamically. \\
        height: '315',
        width: '560',
        videoId: randomVideo,
        playerVars: {
          'autoplay': 0,
          'controls': 0,
          'disablekb': 0,
          'loop': 0,
          'modestbranding': 1,
          'rel': 0,
          'showinfo': 0,
          'mute': 0,
        }
        ,
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      }
                            );
    }
    // 4. The API will call this function when the video player is ready. \\
    function onPlayerReady(event) {
      // set video volume
      event.target.setVolume(2);
      player.unMute();
      $('#OOGABOOGA').click(function () {
        event.target.playVideo();
      }
                           );
    }
    // Playlist thing, it works much better then before and allows me to randomize videos and thing's. \\
    var tag = document.createElement('script'),
        player,
        videoPlaylist = [
          // Music
          'Pscasf8A8LY', // Serial experiments lain - Loneliness 1A \\
          '35EfodEvpZw', // KAS:ST - Hell on Earth \\
          'zqwXL2L6Tbg', // Bôa - Duvet (Scummv Remix) \\
          'KeTdkfxac2g', // Sewerslvt - Kawaii Razor Blades (feat. yandere) \\
          'puCrsPleICE', // Celeste OST Resurrections \\
          'BVln8WpZ6hM', // Aether - Illusion (slowed) \\
          // Clips
          '24rPXmWWXek', // [split] https://www.youtube.com/watch?v=4tm-8HIOHlA \\
          '4tm-8HIOHlA', // [wired] https://www.youtube.com/watch?v=24rPXmWWXek \\
          'D9Crm8zbgfg', // [real_me] https://www.youtube.com/watch?v=nAcmJBLOVs0 \\
          '6t2d12MPhA0', // [letsalllovelain] https://www.youtube.com/watch?v=6t2d12MPhA0 \\

        ],
        delay = 20, // s
        repeat;
    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }
  )(window, document);
  // End of script! \\
</script>
</div>
<!-- End of script! -->