Toggling sound on background video

video
youtube
audio

#1

Hi there,

I was wondering if anyone has been able to toggle the sound on a background Youtube video.

The only way I’ve managed to add sound is by changing the src of the iframe such that it no longer contains enablejsapi. However, if loop=1 is present, then the video plays continuously without the ability to mute, and if loop=0 is present, then there is no way to restart the video (unless the page is refreshed).


#2

Just thought I’d let people that I’ve managed to get this to work (please excuse formatting, it wasn’t playing nice).

As a custom script, these were the steps and code used to achieve this.

Steps

  1. Load the YT Player API, and target the image container of the background hero video
  2. Create two buttons using the page builder - Toggle Sound and Toggle Play button. You will then use some YT methods to perform these actions
  3. Delete the native Unbounce video iframe

CODE
1)
// Load the IFrame Player API code asynchronously.
var tag = document.createElement(‘script’);
tag.src = “https://www.youtube.com/player_api”;
var firstScriptTag = document.getElementsByTagName(‘script’)[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an `iframe` and
  // YouTube player after the API code downloads.
  var heroVideo;

  function onYouTubePlayerAPIReady() {
    heroVideo = new YT.Player('lp-pom-block-8-video-background-image', {
      playerVars : {
        loop: 1, 
        modestbranding: 1,
        hd: 1,
        rel: 0,
        showinfo: 0,
        controls: 0,
        iv_load_policy: 3,
        wmode: 'transparent',
        autohide: 1,
        autoplay: 1,
        disablekb: 1,
        fs: 1,
        html5: 1,
        enablejsapi: 1
      },
      videoId: 'your-youtube-video-id'
    });

2)
// Sound Toggle
` $(’#lp-pom-button-131’).on(‘click’, function() {
var isMuted = heroVideo.isMuted();
if (isMuted) {
heroVideo.unMute();
} else {
heroVideo.mute();
}
})

// *Play Toggle*
$('#lp-pom-button-132').on('click', function() {
  var playerState = heroVideo.getPlayerState();
  if (playerState == 2 || playerState == 0) {
    heroVideo.playVideo(); 
  } else if (playerState == 1) {
    heroVideo.pauseVideo();
  }
})`

3)
$('#lp-pom-block-8-video-background-iframe').remove();


#3

I’ve also created a quick demonstration of this, which can be found here.

I hope this helps anyone trying to do something like this :slight_smile:


#4

WOAH!! @Ivan_RL you’re a CHAMP! I’m so stoked you got this to work and included a workaround to achieve this.

I’m going to change this post from a Technical Question to a post to include in our Tips and Scripts category so that users can benefit from your genius!

Thanks so much for following up here, YOU ROCK!!


#5

Just glad I managed to get this to work :smiley:


#6

Hi! is it possible to use this code for vimeo too? thanks in advance! @Ivan_RL


#7

Hey @Enrique_Pinedo, sorry for getting back to you so late!

It’s currently using the Youtube Javascript API library, but I’ll give it a go later this week utilizing the Vimeo Javascript API library.

I’ll let you know when it’s done :slight_smile:


#8

Thanks in advance for the vimeo version! I’m making a test with the youtube version and the code you left, but I can’t manage to work it out because there are still things i can’t understand pretty well about coding, any advice on implementing it?, Do I need to load a Jquery Library? or if you can help me with a step by step that would be super helpfull! thanks!