Jump to content
jbs

Multiple random youtube videos

Recommended Posts

Hello, new to the forum here. I'm currently trying to get multiple random youtube videos embedded into a site and seem to be having some trouble. No matter what I do, only one of the videos will load. The goal was to have multiple videos, with different sets of random videos set to load on each. I have both sets of script's and divisions loaded into the body (I have no idea what I'm doing unfortunately). Both work just fine, just not at the same time. I was hoping someone could point me in the right direction in what to change to get this to work. Thanks for any help in advance, it's much appreciated.

 

    <script>
        var videos = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];
        window.onload = function () {
            var playerDiv = document.getElementById("random_player");
            var player = document.createElement("IFRAME");
            var randomVideoUrl = videos[Math.floor(Math.random() * videos.length)];
            player.setAttribute('width', '640');
            player.setAttribute('height', '390');
            player.setAttribute('src', randomVideoUrl);
            playerDiv.appendChild(player);
        };
    </script>

<div id="random_player" /></div>

 

and the 2nd

 

        <script>
        var videos = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];
        window.onload = function () {
            var playerDiv2 = document.getElementById("random_player2");
            var player = document.createElement("IFRAME");
            var randomVideoUrl2 = videos[Math.floor(Math.random() * videos.length)];
            player.setAttribute('width', '640');
            player.setAttribute('height', '390');
            player.setAttribute('src', randomVideoUrl2);
            playerDiv2.appendChild(player);
        };
    </script>

<div id="random_player2" /></div>

Share this post


Link to post
Share on other sites

There can only be a single window.onload, using multiple only the very last one will get processed only.

Use single video array, and place player2 code within first window.onload event function below player1 code.

Only by using addEventListener for window, you then will be able to run code individually on event onload.

Share this post


Link to post
Share on other sites

Thanks for the reply. I'm too much of a moron to figure out how to make implement addEventListener but I was able to make it work like this. I'm sure there's a more efficient way to make it work but my mental capacity (or lack thereof) only allowed for this.

 

      <script>
        var videos = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];
        var videos2 = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];
        var videos3 = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];
        window.onload = function () {
            var playerDiv = document.getElementById("random_player");
            var playerDiv2 = document.getElementById("random_player2");
            var playerDiv3 = document.getElementById("random_player3");
            var player = document.createElement("IFRAME");
            var player2 = document.createElement("IFRAME");
            var player3 = document.createElement("IFRAME");
            var randomVideoUrl = videos[Math.floor(Math.random() * videos.length)];
            var randomVideoUrl2 = videos2[Math.floor(Math.random() * videos2.length)];
            var randomVideoUrl3 = videos3[Math.floor(Math.random() * videos3.length)];
            player.setAttribute('width', '350');
            player.setAttribute('height', '197');
            player.setAttribute('src', randomVideoUrl);
            player2.setAttribute('width', '350');
            player2.setAttribute('height', '197');
            player2.setAttribute('src', randomVideoUrl2);
            player3.setAttribute('width', '350');
            player3.setAttribute('height', '197');
            player3.setAttribute('src', randomVideoUrl3);
            playerDiv.appendChild(player);
            playerDiv2.appendChild(player2);
            playerDiv3.appendChild(player3);
        };
    </script>

Share this post


Link to post
Share on other sites

IF the array values are the same why use three when one will do?

var videos = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];

           var randomVideoUrl = videos[Math.floor(Math.random() * videos.length)];
            var randomVideoUrl2 = videos[Math.floor(Math.random() * videos.length)];
            var randomVideoUrl3 = videos[Math.floor(Math.random() * videos.length)];

Yes! there is a easier way, instead of using singular unique id, use class names and loop them instead

            var videos = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];
            window.onload = function() {
                var playerDiv = document.getElementsByClassName("random_player");

                for (var i = 0; i < playerDiv.length; i++) {
                    var player = document.createElement("IFRAME");
                    var randomVideoUrl = videos[Math.floor(Math.random() * videos.length)];
                    player.setAttribute('width', '640');
                    player.setAttribute('height', '390');
                    player.setAttribute('src', randomVideoUrl);
                    playerDiv[i].appendChild(player);
                }
            };
    <h3>Video #1</h3>
    <div class="random_player"></div>
    <h3>Video #2</h3>
    <div class="random_player"></div>

 

Edited by dsonesuk

Share this post


Link to post
Share on other sites
3 hours ago, dsonesuk said:

The the array values are the same why use three when one will do?

var videos = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];

           var randomVideoUrl = videos[Math.floor(Math.random() * videos.length)];
            var randomVideoUrl2 = videos[Math.floor(Math.random() * videos.length)];
            var randomVideoUrl3 = videos[Math.floor(Math.random() * videos.length)];

Yes! there is a easier way, instead of using singular unique id, use class names and loop them instead

 

Well I figured I needed that to allow for a three different sets of random videos for three different divisions. But yea not know anything about this stuff and just fumbling my way through it I knew what I had done there just didn't pass the eye test.

Edited by jbs

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×