"Enhance Your Website with Multiple Video Streams using YouTube API Events

Question

"Enhance Your Website with Multiple Video Streams using YouTube API Events

Hello everyone!

I am looking to include multiple videos on my website and have them start playing automatically when a user scrolls and the videos are in view. I want the speakers to be muted by default using the mute() function.

Previously, I had success with one video on a single page, but now that I'm trying to add multiple videos, I'm encountering some issues. Can you help me figure out what I'm missing in my code?

Below is the HTML part:

<div class="video-container">
<div data-id="olBOo_S5AHY"></div>
</div>

<div class="video-container">
<div data-id="3IXKIVZ9T-U"></div>
</div>

<div class="video-container">
<div data-id="LAQDcnwwspQ"></div>
</div>

And this is the JavaScript part:

function onYouTubePlayerAPIReady() {

var players = document.querySelectorAll('.video-container div')

for (var i = 0; i < players.length; i++) {
    new YT.Player(players[i], {
        width: 600,
        height: 400,
        videoId: players[i].dataset.id, 
         events: {
         onReady: initialize
        }
    });
}
}

function initialize(){

players[i].mute(); // Need help fixing this issue

var waypoints = jQuery('.video-container').waypoint(function() {


    if( players[i]) { // Need help fixing this issue
       var fn = function(){ 
        players[i].playVideo();  // Need help fixing this issue
       }
       setTimeout(fn, 1000);
    }

}, {
  offset: '50%'
})
}

The videos are displaying on my site, but I'm struggling to add these events to each individual video. What am I doing wrong? Any assistance would be greatly appreciated!

Thank you so much!

Melanie

javascript api video youtube

Answer 1

Answer №1

Hey Milenoi,

Your collection of divs stored in the players variable is not directly linked to the YouTube elements you want to manipulate. You will need to assign the YouTube player objects to a specific location in order to control them individually. Alternatively, there might be another method to locate and address these elements.

I have provided a demonstration on this functioning setup in my sample code here: http://jsbin.com/hozaluzaho. In this example, as you scroll down, additional players are activated. Take note of how I created and managed the necessary objects for this functionality.

// Obtain .player nodes
var playerDivs = document.querySelectorAll(".player");

// Convert nodelist to array for forEach();
var playerDivsArr = [].slice.call(playerDivs);

var players = new Array(playerDivsArr.length);
var waypoints = new Array(playerDivsArr.length);

// Callback function when YouTube resources are ready
function onYouTubeIframeAPIReady() {

  // Create YouTube players
  playerDivsArr.forEach(function(e, i) { // Loop through each item ...
    players[i] = new YT.Player(e.id, {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: { /* No events specified */ }
    })
  })

  // Create waypoints
  $(".player").each(function(i, e) {
    waypoints[i] = new Waypoint({
      element: e,
      handler: function() {
        players[i].playVideo();
      }
    })
  });

}

Additional Note:

Hello again,

No need to worry. In your initialize function, ensure that you iterate over the array containing multiple YouTube player objects; you must engage with each individual object instead of just one generic player variable within the initialization function (which may not have been defined if you followed my previous code?). Refer to the section labeled create yt players above. Each slot in the players[] array is filled with a distinct player-object. To mute each player, you will need to interact with every object in the array using a loop like forEach.

function initialize() {
  players.forEach(function(yt, i) {
    yt.mute();
  });
}

Here is an alternative demo: http://jsbin.com/ficoyo/edit?html,output

Cheers!

Answer 2

Hey Milenoi,

Your collection of divs stored in the players variable is not directly linked to the YouTube elements you want to manipulate. You will need to assign the YouTube player objects to a specific location in order to control them individually. Alternatively, there might be another method to locate and address these elements.

I have provided a demonstration on this functioning setup in my sample code here: http://jsbin.com/hozaluzaho. In this example, as you scroll down, additional players are activated. Take note of how I created and managed the necessary objects for this functionality.

// Obtain .player nodes
var playerDivs = document.querySelectorAll(".player");

// Convert nodelist to array for forEach();
var playerDivsArr = [].slice.call(playerDivs);

var players = new Array(playerDivsArr.length);
var waypoints = new Array(playerDivsArr.length);

// Callback function when YouTube resources are ready
function onYouTubeIframeAPIReady() {

  // Create YouTube players
  playerDivsArr.forEach(function(e, i) { // Loop through each item ...
    players[i] = new YT.Player(e.id, {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: { /* No events specified */ }
    })
  })

  // Create waypoints
  $(".player").each(function(i, e) {
    waypoints[i] = new Waypoint({
      element: e,
      handler: function() {
        players[i].playVideo();
      }
    })
  });

}

Additional Note:

Hello again,

No need to worry. In your initialize function, ensure that you iterate over the array containing multiple YouTube player objects; you must engage with each individual object instead of just one generic player variable within the initialization function (which may not have been defined if you followed my previous code?). Refer to the section labeled create yt players above. Each slot in the players[] array is filled with a distinct player-object. To mute each player, you will need to interact with every object in the array using a loop like forEach.

function initialize() {
  players.forEach(function(yt, i) {
    yt.mute();
  });
}

Here is an alternative demo: http://jsbin.com/ficoyo/edit?html,output

Cheers!

"Enhance Your Website with Multiple Video Streams using YouTube API Events

Answer №1

Similar questions

Error: Attempting to use hooks outside the scope of a function component in react-native. Hooks can only be called within the body of a

waiting for deferred to complete in esri javascript api before continuing with code execution - labelPoints

Interactive element for initiating a HTTP request to NodeJS/Express server to trigger a specific function

Can you provide the proper syntax for the Jquery done() function?

In my experience, I have encountered issues with certain routes not functioning properly within Express

What is preventing me from loading a module using a variable containing a string?

Fetch JSON information from various servers/domains through ajax requests

Attaching this to the event listener in React JS

List of coordinates extracted from PolylineMeasure plugin in the React Leaflet library

What is the process for creating a symbolic link from a project's node_modules directory?

Is it possible to retrieve server data in a JavaScript file?

Stopping the papaparse streaming process once a certain number of results have been achieved

A guide on extracting the text content from an anchor tag by using xPath() with a combination of selenium and Mocha

Unable to create the complete PDF file using html-pdf in a NodeJS environment

Obtaining the source code from a different domain website with the help of jQuery

When using the "Content-Disposition" header with the value "inline;filename=" + fileName, it does not necessarily guarantee that PDF files will be displayed directly

Possible solutions for AngularJS using ng- tags

Extract the content of an element and incorporate it into a script (AddThis)

Implement a click event using jQuery specifically for Internet Explorer version 7

Master the art of returning two functions within a single function in Javascript with NodeJS and ExpressJS