1

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.

j08691
  • 204,283
  • 31
  • 260
  • 272
Rui Farinha
  • 196
  • 2
  • 14
  • Take a look at: http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array – JonSG Jul 21 '16 at 18:24

1 Answers1

0

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!

Hans Strausl
  • 605
  • 5
  • 11
  • What do I need to change on the html part of the code @hansstrausl ? bg – Rui Farinha Jul 23 '16 at 03:27
  • You should not need to update the HTML, however I updated my answer, it appears that jQuery wouldn't expose the data-property attribute, so I just used plain old Javascript to set the new properties. – Hans Strausl Jul 23 '16 at 15:10
  • Thanks, its now randomizing and playing the videos! But sometimes whenever I reload the page, the video doesn't play :/ Any tip? – Rui Farinha Jul 23 '16 at 20:00
  • @RuiFarinha i just realized there was an error again, the line `var currVid = vids[Math.floor(Math.random()*vids.length-1)];` was incorrect, there needs to be paranthesis around `vids.length-1` so here is the corrected line: `var currVid = vids[Math.floor(Math.random()*(vids.length-1))];` – Hans Strausl Jul 24 '16 at 16:13