How to execute volume changes on a youtube iframe from javascript?

Question

How to execute volume changes on a youtube iframe from javascript?

59 Views Asked by loops At 02 February 2024 at 11:41

JS/HTML noob here, please bear with me.

I have an html page containing an iframe. https://developers.google.com/youtube/iframe_api_reference#Example_Video_Player_Constructors I'm using the example in the 'GettingStarted' section above and testing on JSFiddle.

I want to be able to execute volume changes on the youtube player after the page has loaded.

The youtube API's setVolume function works from within the HTML page (I can successfully load the page and set the volume using the information in the docs), but I'm struggling to figure out how to call/expose that outside of the page.

I've figured out a way to do this by adding buttons to the page, see my answer below, and please let me know if there are better approaches! Thanks

Original Q&A

There are 2 best solutions below

Schalcke On 02 February 2024 at 11:52

First, make sure you have included the YouTube Iframe API script in your HTML.

<!-- Include the YouTube Iframe API script -->
<script src="https://www.youtube.com/iframe_api"></script>

Create an HTML element for the YouTube player container.

<!-- HTML container for the YouTube player -->
<div id="player"></div>

Initialize the YouTube player using the Iframe API.

// Variables
var player;

// YouTube API callback function
function onYouTubeIframeAPIReady() {
  // Create the YouTube player
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'YOUR_VIDEO_ID',
    events: {
      'onReady': onPlayerReady
    }
  });
}

// Function called when the player is ready
function onPlayerReady(event) {
  // You can set the initial volume here if needed
  // event.target.setVolume(50);
}

Replace 'YOUR_VIDEO_ID' with the actual YouTube video ID.

Now, you can create functions to control the player's volume from outside the iframe.

// Function to set the volume
function setVolume(volume) {
  if (player) {
    player.setVolume(volume);
  }
}

You can call the setVolume function from outside the iframe.

// Example: Set volume to 75
setVolume(75);

Remember to execute this script after the iframe has been initialized. Ensure that the YouTube Iframe API script is loaded before your custom script.

**loops** · Accepted Answer · 2024-02-02T13:08:47.890000

I have figured this out by using buttons to call the functions I need access to. Here's the HTML from youtube with the buttons added:

  <body>
  
  <button id="mutebutton" onclick = "mute()" > Mute </button>
  <button id= "unmutebutton" onclick = "unmute()" > UnMute </button>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          playerVars: {
            'playsinline': 1
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      
      function mute(){
      player.mute();
      }
      
      function unmute(){
      player.unMute();
      }
      
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

And the javascript to run:

const button = document.getElementById('mutebutton'); 

setTimeout(function() { 
    button.click();
}, 5000);

Timeout is there to ensure everything is fully loaded. Testing this in jsFiddle mutes the video after 5 seconds.

So this gets me a lot of the way with setting volume. My main issue now is that it would be ideal to be able to pass a parameter to increase/decrease the volume to a specific value.

How to execute volume changes on a youtube iframe from javascript?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in IFRAME

Related Questions in YOUTUBE

Related Questions in VOLUME

Trending Questions

Popular # Hahtags

Popular Questions