Skip to content

MaXSaxeDesignWeb/Recursive-YouTube-Iframe

Repository files navigation

Recursive-YouTube-Iframe

Instructions

https://developers.google.com/youtube/iframe_api_reference

HTML

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>

JavaScript

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);