stamat/youtube-background

Programmatically set the volume

another-blank-page opened this issue · 2 comments

another-blank-page commented

Is there a way to control the volume of the video being played if its not muted? I know setVolume() exists but can't seem to get it to work.

My sad attempt:

$(document).ready(function() {
    $('[data-vbg]').each(function() {
        $(this).youtube_background();
        $(this).find('iframe')[0].setVolume(0.15);
    });
});
stamat commented

Hey there @another-blank-page! ✨ So, first of all this was intended to be just the background, without the capability of sound, I seriously cannot remember why I added the mute/unmute option. Anyway, I will add an attribute setting for the volume just for you, so stay tuned. The issue is that you are using jQuery which looses the reference for the index (facrory) object. VideoBackgrounds object holds the index of all of the players.

Instead of using jQuery you can do this:

// Initialize the VideoBackgrounds object using vanilla JS
const videoBackgrounds = new VideoBackgrounds('[data-vbg]', { your_properties: here });
// Loop through all of the initialized backgrounds, each background contains the player variable 
// and depending on the Video, Vimeo, Youtube players you can set the volume. 
// Just remember that the youtube videos wait for `window.onYouTubeIframeAPIReady` to be triggered.
for (let uid in videoBackgrounds.index) {
  if (videoBackgrounds.index[uid] instanceof YoutubeBackground) {
    videoBackgrounds.index[uid].player.setVolume(15); // this should set the volume for all your youtube backgrounds, setting ranges from 0-100
  }
}

That's bout it! ☺️ One quick update with volume is comming right up!

stamat commented

Hey hey @another-blank-page, so I've added a global variable VIDEO_BACKGROUNDS, now when jQuery is being used, and also an uniform function for setting the volume regardless of the type of the video. So you can still use jQuery and have this global variable out of the box.

for (let uid in VIDEO_BACKGROUNDS.index) {
  VIDEO_BACKGROUNDS.index[uid].setVolume(0.15);
}

You can also set the initial volume via an attribute data-vbg-volume="0.15.

Just remember that on mobile the mobile phone volume is picked up and this setting won't have an effect!

This update is in the latest release v1.0.18

Cheers! 🥂

  • ❤️1