Rui Farinha Rui Farinha - 4 months ago 20
HTML Question

Load and shuffle videos each time you enter site

I've been using this boostrap snippet that loads a video when entering site. http://bootsnipp.com/snippets/featured/ful-screen-video-background

I'm trying to make it load and randomize a list of videos each time you enter the site, but I'm not getting it to work. Help me pls!

HTML:

<section class="content-section video-section"><div class="pattern-overlay"><a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=fdJc1_IBKJA',containment:'.video-section', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a></div></section>


JS:

$(document).ready(function () {

$(".player").mb_YTPlayer(); });


Best Reagrds.

Answer

I would keep an array of the video URL's, as well as the various options for the video, then select one video at random when the page is loaded and update the data-property of the html.

Javascript:

var vids = ["https://www.youtube.com/watch?v=fdJc1_IBKJA",
  "https://www.youtube.com/watch?v=xaDZvw9ot3E",
  "https://www.youtube.com/watch?v=3WWlhPmqXQI"]; // create your list of youtube videos

var currVid = vids[Math.floor(Math.random()*(vids.length-1))]; // this will grab a random video from the array.

var opts = { // keep all the options in an object
  videoURL: currVid, // set the video to display
  containment:'.video-section',
  quality:'large', 
  autoPlay:true, 
  mute:true, 
  opacity:1
}

$(document).ready(function(){
  document.getElementById("bgndVideo").dataset.property = JSON.stringify(opts); // change to this

  $(".player").mb_YTPlayer(); // play!
});

Hopefully this helps!