Random ID on page load or Refresh

Question

I'm trying to create a function that shows a different ID, on load or refresh/ A different video on load.

My main goal is to create a splash intro popup that shows a <section> with youtube video in full screen, As a Section with a video background.

I have 6 different videos and I want each time to load a different video. So I'm doing this with Elementor. adding 6 sections, giving each section an ID and inserting a different youtube video background.

I need to do something like document.getElementById('vidz')[0].className+=' add-' + Math.floor((Math.random() * 10) + 1);

I'm bad at JS Please help me. I have this I want to add a function that shows each time a different ID: section#vidz1/#vidz2/#vidz3/.../#vidz6 and disables the other youtube videos to not load everything at once

function getRandomArrayItem(arr){
  var randomKey = Math.floor(Math.random() * arr.length);
  var item = arr[randomKey];
  return(item);
}


function showRandomString(){
  var arrKeys = ["first","second","third","four","five"];
  var strItem = getRandomArrayItem(arrKeys);
  document.getElementById("output").innerHTML = strItem;
}

window.onload = showRandomString;

If you have a better solution let me know each section loads the youtube

<iframe class="elementor-background-video-embed" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/qoXa-tTkitg" (more)></iframe>

So one section with a different youtube ID can be faster no? Thanks

Please show actual HTML and expected HTML - your code does not reflect what you want to do. What are section#vidz1/#vidz2/#vidz3/ ? — mplungjan, Sep 24 '19 at 14:49
I'm looking for the best way to create the video background, trying here: https://codepen.io/itayko/project/full/XapQeK — itaycode, Sep 24 '19 at 17:15

score 2 · Answer 1 · answered Sep 24 '19 at 16:01

Any HTML in a <template> element is not rendered right away, so you could use that to avoid loading the videos. To keep this simple, you could just put the static content for a single <iframe> into the template and change it depending on the video data selected. For an example, see the snippet I've included below.

The following snippet doesn't run properly on this site, for some reason (assuming sandboxing). But, you can run the same code on jsfiddle and it does actually work.

// Interface w/ HTML
var SELECTORS = {
  VIDEO_CONTAINER: '.js-video-container',
  VIDEO_TEMPLATE: '.js-video-template',
  VIDEO: '.js-video'
};

var VIDEO_DATA_LIST = [
  { src: 'https://www.youtube.com/embed/qoXa-tTkitg' },
  { src: 'https://www.youtube.com/embed/iphcyNWFD10' },
  { src: 'https://www.youtube.com/embed/IvUU8joBb1Q' },
  { src: 'https://www.youtube.com/embed/zGxwbhkDjZM' }
];

function getRandomArrayItem(array) {
  return array[Math.floor(Math.random() * array.length)];
}

function insertRandomVideo(templateElement, parentElement, videoSelector, videoDataList) {
  var videoData = getRandomArrayItem(videoDataList);

  // Create a videoElement from the template
  var videoElement = templateElement.content.cloneNode(true).querySelector(videoSelector);
  
  // Add dynamic data to the cloned element
  videoElement.src = videoData.src; // NOTE: videoData gets repeated if you use more properties

  // Add the cloned element to the parent/container
  parentElement.appendChild(videoElement);
}

window.addEventListener('DOMContentLoaded', function(event) {
  // Run the function
  insertRandomVideo(
    document.querySelector(SELECTORS.VIDEO_TEMPLATE),
    document.querySelector(SELECTORS.VIDEO_CONTAINER),
    SELECTORS.VIDEO,
    VIDEO_DATA_LIST
  );
});

<div class="js-video-container"></div>
<template class="js-video-template">
  <iframe class="js-video elementor-background-video-embed" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="640" height="360"></iframe>
</template>

Also, here's an alternative version, which I like better. But, before you jump in, let me explain a few things I used, just in case you don't follow...

const is basically var (with different scoping but prevents re-assignment, so I like it for readability)
I used const with functions just to prevent them from being changed in later code.
I used arrow functions in place of "regular" functions - they prevent odd usage of this (when you don't actually NEED to use it in most cases) and I just personally like them because they're shorter.
I put all the selectors at top and made them include a js- prefix so it's easy to follow the hooks from HTML -> JS (also used this above, but added Object.freeze() to, again, prevent changes)
I used object destructuring just to keep things DRY when you add more properties to the video data objects.
Finally, I prefer to inject instead of directly using constants and elements inside a function

First, the jsfiddle, and here's the snippet:

// Interface w/ HTML
const SELECTORS = Object.freeze({
  VIDEO_CONTAINER: '.js-video-container',
  VIDEO_TEMPLATE: '.js-video-template',
  VIDEO: '.js-video',
})

const VIDEO_DATA_LIST = [
  { src: 'https://www.youtube.com/embed/qoXa-tTkitg' },
  { src: 'https://www.youtube.com/embed/iphcyNWFD10' },
  { src: 'https://www.youtube.com/embed/IvUU8joBb1Q' },
  { src: 'https://www.youtube.com/embed/zGxwbhkDjZM' },
]

// (Just shortened this using arrow functions)
const getRandomArrayItem = array =>
  array[Math.floor(Math.random() * array.length)]

const insertRandomVideo = (templateElement, parentElement, videoSelector, videoDataList) => {
  const { src } = getRandomArrayItem(videoDataList)

  // Create a videoElement from the template
  const videoElement = templateElement.content.cloneNode(true).querySelector(videoSelector)
  videoElement.src = src
  // (Can also set other values if you include them in the data list)

  parentElement.appendChild(videoElement)
}

window.addEventListener('DOMContentLoaded', event => {
  // Run the function
  insertRandomVideo(
    document.querySelector(SELECTORS.VIDEO_TEMPLATE),
    document.querySelector(SELECTORS.VIDEO_CONTAINER),
    SELECTORS.VIDEO,
    VIDEO_DATA_LIST,
  )
})

<div class="js-video-container"></div>
<template class="js-video-template">
  <iframe class="js-video elementor-background-video-embed" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="640" height="360"></iframe>
</template>

Great, it looks awesome, thanks! One thing, I need it autoplay yes, it needs to play immediately, how do u suggest to do that? — itaycode, Sep 24 '19 at 17:14
Add `?autoplay=1` to each url and `allow="autoplay"` to each iframe (found here: https://stackoverflow.com/a/3433300/757839) — BCDeWitt, Sep 24 '19 at 17:17
Haha, yeah, I assume most of us aren't developing for IE at this point but important to note, anyway — BCDeWitt, Sep 25 '19 at 10:44

Random ID on page load or Refresh

1 Answers1