Smart Net
New Member
Last years we try to rendomize youtube videos as embeded link in browser source. Finaly, we found very good alternative. This setup ensures that each time the URL is opened (whether in OBS or a browser), the playlist will be randomized.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Playlist Randomizer</title>
</head>
<body>
<div id="player"></div>
<script>
// Load the IFrame Player API code asynchronously.
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;
var playlist = "YOUR_PLAYLIST_ID"; // Replace with your playlist ID
var videoIds = [];
// Called automatically when the YouTube IFrame API is ready
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
events: {
'onReady': onPlayerReady
}
});
}
// Called when the player is ready
function onPlayerReady(event) {
fetch(`https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=50&playlistId=${playlist}&key=YOUR_API_KEY`)
.then(response => response.json())
.then(data => {
videoIds = data.items.map(item => item.contentDetails.videoId);
shuffleArray(videoIds); // Randomize the playlist
player.loadPlaylist(videoIds);
});
}
// Function to shuffle the array of video IDs
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array, array[j]] = [array[j], array];
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Playlist Randomizer</title>
</head>
<body>
<div id="player"></div>
<script>
// Load the IFrame Player API code asynchronously.
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;
var playlist = "YOUR_PLAYLIST_ID"; // Replace with your playlist ID
var videoIds = [];
// Called automatically when the YouTube IFrame API is ready
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
events: {
'onReady': onPlayerReady
}
});
}
// Called when the player is ready
function onPlayerReady(event) {
fetch(`https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=50&playlistId=${playlist}&key=YOUR_API_KEY`)
.then(response => response.json())
.then(data => {
videoIds = data.items.map(item => item.contentDetails.videoId);
shuffleArray(videoIds); // Randomize the playlist
player.loadPlaylist(videoIds);
});
}
// Function to shuffle the array of video IDs
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array, array[j]] = [array[j], array];
}
}
</script>
</body>
</html>
Steps to Use:
- Replace Variables:
- Replace YOUR_PLAYLIST_ID with your actual YouTube Playlist ID.
- Replace YOUR_API_KEY with your YouTube Data API v3 key.
- Save and Use:
- Save the HTML file as randomized_playlist.html.
- Add it as a browser source in OBS using the file path, as explained earlier.