videotizer/apod-playlist.html

## apod-playlist.html
<!DOCTYPE html>

<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>Astronomy Picture of the Day - Read Aloud by Artifical Intelligence - Created by Videotizer</title>

    <style>
      * { margin: 0; padding: 0; }
      .embed-container { position: relative; height: 100vh; overflow: hidden; }
      .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    </style>
  </head>

  <body>
    <div class="embed-container">
      <div id="player"></div>
    </div>

    <script>
      var urlParams = new URLSearchParams( window.location.search );
      var SETTINGS  = {
        playlist_id: urlParams.get('playlist') || 'PLN7CbH97ZxIjz3xhBHGzfGfbvWRSs8WQp',
        random     : 1,
        autoplay   : 1,
        loop       : 1,
        index      : 0,
      };

      // -----------------------------------------------------------------------

      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";

      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // -----------------------------------------------------------------------

      var player;

      function onYouTubeIframeAPIReady()
      {

        console.log('onYouTubeIframeAPIReady()');

        // ---------------------------------------------------------------------

        player = new YT.Player('player', {

          height: '540',
          width : '960',

          // -------------------------------------------------------------------

          playerVars: {
            version : 3,
            autoplay: SETTINGS.autoplay,
            loop    : SETTINGS.loop,
            index   : SETTINGS.index,
            rel     : 0,
          },

          // -------------------------------------------------------------------

          events: {
            'onReady'      : onPlayerReady,
            'onStateChange': onPlayerStateChange,
          },

        });

      }
      // onYouTubeIframeAPIReady()

      // -----------------------------------------------------------------------

      var playlistArray;
      var playListArrayLength;
      var maxNumber;

      var oldNumber = SETTINGS.index;
      var NewNumber = SETTINGS.index;

      function newRandomNumber()
      {

        oldNumber = NewNumber;
        NewNumber = Math.floor( Math.random() * maxNumber );

        // ---------------------------------------------------------------------

        return ( NewNumber === oldNumber ) ? newRandomNumber() : NewNumber;

      }
      // newRandomNumber()

      // -----------------------------------------------------------------------

      function onPlayerReady( event )
      {

        console.log('onPlayerReady()');

        // ---------------------------------------------------------------------

        player.loadPlaylist({
          'listType': 'playlist',
          'list'    : SETTINGS.playlist_id,
        });

      }
      // onPlayerReady()

      // -----------------------------------------------------------------------

      var firstLoad = true;

      function onPlayerStateChange( event )
      {

        console.log('onPlayerStateChange()');

        if ( ! SETTINGS.random )
        {
          return;
        }

        // ---------------------------------------------------------------------

        if ( event.data == YT.PlayerState.ENDED )
        {
          player.playVideoAt( newRandomNumber() );
        }
        else
        {
          if ( firstLoad && event.data == YT.PlayerState.PLAYING )
          {
            firstLoad           = false;
            playlistArray       = player.getPlaylist();
            playListArrayLength = playlistArray.length;
            maxNumber           = playListArrayLength;
            NewNumber           = newRandomNumber();

            player.playVideoAt( newRandomNumber() );
          }
        }

      }
      // onPlayerReady()

    </script>
  </body>

</html>
	<!DOCTYPE html>

	<html>

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<title>Astronomy Picture of the Day - Read Aloud by Artifical Intelligence - Created by Videotizer</title>

	<style>
	* { margin: 0; padding: 0; }
	.embed-container { position: relative; height: 100vh; overflow: hidden; }
	.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	</style>
	</head>

	<body>
	<div class="embed-container">
	<div id="player"></div>
	</div>

	<script>
	var urlParams = new URLSearchParams( window.location.search );
	var SETTINGS = {
	playlist_id: urlParams.get('playlist') \|\| 'PLN7CbH97ZxIjz3xhBHGzfGfbvWRSs8WQp',
	random : 1,
	autoplay : 1,
	loop : 1,
	index : 0,
	};

	// -----------------------------------------------------------------------

	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";

	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	// -----------------------------------------------------------------------

	var player;

	function onYouTubeIframeAPIReady()
	{

	console.log('onYouTubeIframeAPIReady()');

	// ---------------------------------------------------------------------

	player = new YT.Player('player', {

	height: '540',
	width : '960',

	// -------------------------------------------------------------------

	playerVars: {
	version : 3,
	autoplay: SETTINGS.autoplay,
	loop : SETTINGS.loop,
	index : SETTINGS.index,
	rel : 0,
	},

	// -------------------------------------------------------------------

	events: {
	'onReady' : onPlayerReady,
	'onStateChange': onPlayerStateChange,
	},

	});

	}
	// onYouTubeIframeAPIReady()

	// -----------------------------------------------------------------------

	var playlistArray;
	var playListArrayLength;
	var maxNumber;

	var oldNumber = SETTINGS.index;
	var NewNumber = SETTINGS.index;

	function newRandomNumber()
	{

	oldNumber = NewNumber;
	NewNumber = Math.floor( Math.random() * maxNumber );

	// ---------------------------------------------------------------------

	return ( NewNumber === oldNumber ) ? newRandomNumber() : NewNumber;

	}
	// newRandomNumber()

	// -----------------------------------------------------------------------

	function onPlayerReady( event )
	{

	console.log('onPlayerReady()');

	// ---------------------------------------------------------------------

	player.loadPlaylist({
	'listType': 'playlist',
	'list' : SETTINGS.playlist_id,
	});

	}
	// onPlayerReady()

	// -----------------------------------------------------------------------

	var firstLoad = true;

	function onPlayerStateChange( event )
	{

	console.log('onPlayerStateChange()');

	if ( ! SETTINGS.random )
	{
	return;
	}

	// ---------------------------------------------------------------------

	if ( event.data == YT.PlayerState.ENDED )
	{
	player.playVideoAt( newRandomNumber() );
	}
	else
	{
	if ( firstLoad && event.data == YT.PlayerState.PLAYING )
	{
	firstLoad = false;
	playlistArray = player.getPlaylist();
	playListArrayLength = playlistArray.length;
	maxNumber = playListArrayLength;
	NewNumber = newRandomNumber();

	player.playVideoAt( newRandomNumber() );
	}
	}

	}
	// onPlayerReady()

	</script>
	</body>

	</html>