Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Embeded APOD YouTube playlist with auto shuffle and auto loop in a responsive full size HTML page
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.