https://developers.google.com/youtube/iframe_api_reference
Basic HTML page format for the Recursive YouTube Iframe functions
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Recursive YouTube Iframe</title>
</head>
<body>
<main id="YTVids"></main>
<script src="ytvids.js"></script>
</body>
</html>
Edit the uri array to feature the id's of the chosen videos
var uri = ["FPI9Rt1PIkY", "W282G4FiS9I", "0FLHal964uM", "Dx8VTOGhIXo", "J_EuWgOK88I", "ST6ojbdhv7Q", "0BWji9hBlO0", "qfmTR_CLYEo", "T1KbB0BheZs", "Zjn2F1uKP1U", "10wqmdu5S7Y", "liAzX0cO5Tg"];
Edit the embed array to feature any autoplay videos - one could have all of the videos autoplay for a mess of audio or an array of highly-productive silent videos
var embed = [true, false, false, false, false, false, false, false, false, false, false, false];
Edit the origin to represent a fixed URL address or continue to use
window.location.href
to dinamically retrieve the URL of the page
var origin = var origin = window.location.href;
Edit the following if statement to disable autoplay and the optional origin for protecting HTTPS connections from malicious appending and inspection of data
if (embed[i] == true) {
curi = furi + "?autoplay=1&" + origin;
} else {
curi = furi + "?" + origin;
}
Edit the width, height, frameborder, allow and allowFullScreen options with the following settings:
var iframe = document.createElement('iframe');
iframe.src = encodeURI(curi);
iframe.style.width = "560px";
iframe.style.height = "315px";
iframe.frameborder = "0";
iframe.allow ="autoplay; encrypted-media; allowfullscreen";
iframe.setAttribute('allowFullScreen', '')
Edit "YTVids" to match the name of the >main</>article</>section</>div< tag id
document.getElementById("YTVids").appendChild(iframe);