"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

Leverage the power of Reactjs to add hover effects to a mapped

A step-by-step guide on accessing the data from an uploaded JSON file in a React application

Encountering an issue with Meteor and node-celery: "Unable to access property 'slice' of null"

Creating Beautiful Tabs with React Material-UI's Styling Features

Consider yourself a module for npm, just like a node

When implementing dynamic routing in Next.js, an error occurs with TypeError: the 'id' parameter must be a string type. It is currently

What is the best way to call an API within a loop using Node.js?

Managing the clearing of a view component in React or Vue.js

Python script for extracting data from live YouTube chats

Verifying the content of the JSON data

Utilizing Axios for Vue Multiselect on select/enter Event

The functioning of JavaScript's ajax capabilities

Incorporate Angular frontend into current website or project

Filter the ng-repeat list dynamically by triggering ng-click event

Initiate an Ajax request from a hyperlink

What is the method for determining the level based on the provided experience points?

Issue with Swiper js "autoheight" not resizing correctly for the height of the first slide upon page initialization

Are there any instances of a race condition present in the following?

Adding x days to a Unix timestamp can be achieved by converting the Unix timestamp

Ensure your HTML5 videos open in fullscreen mode automatically