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’)N0];

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();

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 🙂

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!!

Just glad I managed to get this to work 😃

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

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 🙂

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!

Hi @Ivan_RL !

Thanks so much for this!

Trying to implement this onto one of my pages as well, but not having much luck. Is there perhaps a specified click action I need to set for the button? I can send you the page I’m currently building privately if possible!

Regardless, thanks so much! (:

edit: Realized this thread is about two years old, sorry – if anyone could chime in to help, that’d be amazing! 🙂

thank you so much

Hello! I am currently trying to do this using an embedded video(and not a background video) from youtube wherein the video autoplays and the user has the option to toggle sound. But I can’t seem to make it work.

Here is the script I added before body end tag:

<script>

  // 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-video-2208', {

      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: 'KyljtznGZqs'

    });



    // Hero Video Functionality

    // *Sound Toggle*

    $('#lp-pom-button-2242').on('click', function() {

      var isMuted = heroVideo.isMuted();

      if (isMuted) {

        heroVideo.unMute();

      } else {

        heroVideo.mute(); 

      }

    })



    // *Play Toggle*

    $('#lp-pom-button-2244').on('click', function() {

      var playerState = heroVideo.getPlayerState();

      if (playerState == 2 || playerState == 0) {

        heroVideo.playVideo(); 

      } else if (playerState == 1) {

        heroVideo.pauseVideo();

      }

    })

  }



</script>

<script>

  $(document).ready(function() {

	$('#lp-pom-video-2208').remove();

  })

</script>