Embed a YouTube Video with Mute Sound, Set Default Volume and Call onStateChange Event

← PrevNext →

You can embed or add your favorite YouTube video on your website using YouTube IFrame Player API. Its very easy to use and it comes with many ready to use features, that would allow you to customize and control the embedded video. In this article, I’ll show you how to embed a YouTube video on a web page with its sound muted, when the page loads. Along with it, the example here shows how to set a default volume to the player and how with the onStateChange Event you can control the player's behavior.

Ref: YouTube Player API Reference

Embed Mute YouTube Video

The API provides the necessary JavaScript functions and properties, with which you can control the behavior of the player and the video. For example, you can reduce or increase the players volume, play or stop the video any time, run the video in a loop, auto play video etc.

Related Post: How to Embed YouTube Video in a Webpage without IFrame

Let’s get started.

Embed YouTube Video with Properties such as Mute, setVolume and AutoPlay

In the first example, I’ll show you how to embed a YouTube video with some features such as AutoPlay, Sound Muted and we’ll also see how to set a value for the volume, when the page loads with the video.

I have explained the properties after the script section of this example.

The Markup with the Script

In the markup section, you will have to add the API source inside the <head> tag. We have to first load the YouTube IFrame API. The API loads asynchronously with the rest of the page. I have also added a <div> element inside the <body> section, which will hold the player.

<html>
<head>
    <title>YouTube IFrame API Example</title>
        
    <!--LOAD YouTube "iframe_api" ASYNCHRONOUSLY.-->
    <script async src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
    <div id="div_YouTube"></div>
</body>

<script>
    function onYouTubeIframeAPIReady() {
        var player;

        player = new YT.Player('div_YouTube', {
            videoId: 'nfk6sCzRTbM',     // THE VIDEO ID.
            width: 560,
            height: 316,
            playerVars: {
                'autoplay': 1,
                'controls': 1,
                'showinfo': 0,
                'modestbranding': 0,
                'loop': 1,
                'fs': 0,
                'cc_load_policty': 0,
                'iv_load_policy': 3
            },
            events: {
                'onReady': function (e) {
                    e.target.mute();
                    e.target.setVolume(50);      // YOU CAN SET VALUE TO 100 FOR MAX VOLUME.
                }
            }
        });
    }
</script>
</html>
Try it

Browser Support:
Chrome 39.0 - Yes | Firefox 34.0 - Yes | Internet Explorer 10 - No | Safari - No

Note: The mute() method does not work in IE 10.

To use the properties and methods provided in the API, we have to first add a pre-defined JavaScript function called onYouTubeIframeAPIReady(). That is the only function that I have added inside the <script> tag in the above example. The function will create the Players object for YT.Player, when the page loads.

While initializing the player, I have defined few parameters that I’ll explain.

1) Container holding the Player: The first parameter is the id of the <div> element (added inside the <body> section), where the API will include the <iframe> element. The <iframe> will contain the player.

2) The Video ID: Every YouTube video has a unique id. The second parameter is the video’s id that I am going play on my website. You can easily get the id of the video. Just go to the YouTube video page and in the browsers address bar you will see the id at end of the URL (followed by the “=” sign). For example, if this is the URL for the video, https://www.youtube.com/watch?v=nfk6sCzRTbM, simply copy the last (bold) characters, that is nfk6sCzRTbM, and paste it against the videoId parameter inside the JavaScript function like this.

videoId: 'nfk6sCzRTbM'

3) Width and Height: Next, I have defined the width and height of the player. The figures are in pixels. It also has a default value, that is, 640 for width and 390 for its height. API will assign default values, if you do not explicitly define any value.

4) playerVars Object: I have defined few more properties to customize my player using the playerVars object.

a. autoplay: If you set the value to 1, the API will Auto play the embed video when the page loads. Set it 0 and your users will have to manually play the video.

b. controls: If set to 1, it will show the pause and play buttons in the player.

c. showinfo: You can hide or show the title of the video. I have set the as 0 as I do not want the title to cover the video.

d. modestbrading: You can hide or show the YouTube logo by setting this parameters value to either 1 or 0.

e. loop: Set the value to 1, if you wish to loop the video or run the video repeatedly.

f. fs: The parameter, when set to 1 will add the full screen option to the player. You will see two square braces at the right bottom corner of the player.

g. cc_load_policy: Show or hide closed captions.

h. iv_load_policy: Show or hide video Annotations.

5) onReady Event Finally, I have defined an event called onReady. It fires the event when the player becomes ready to roll. Within this event, I have set two more parameters. The first parameter sets the player as mute and second parameter set a default volume for the player.

events: {
    'onReady': function (e) {
        e.target.mute();
        e.target.setVolume(50); 
    }
}

I have set the volume as 50, that is, 50% of the max value. You can see the volume at 50% once you un-mute the button on the player. You can adjust or set the player’s volume by assigning a lower value for reduced sound or maximum (such as 100) value for louder sound.

Embed youtube video with onStateChange

The YouTube IFrame API provides many useful events. I have explained about the onReady event in the above example, and here I’ll show how to add the onStateChange event to stop the video after a specified duration.

This event fires whenever the player’s state change. Simply add the below code in the script section.

<script>
    function onYouTubeIframeAPIReady() {
        var player;
        var done = false;

        player = new YT.Player('div_YouTube', {
            videoId: 'nfk6sCzRTbM',
            width: 560,
            height: 316,
            events: {
                'onStateChange': function (e) {
                    if (e.data == YT.PlayerState.PLAYING && !done) {
                        setTimeout(e.target.stopVideo(), 5000);
                        done = true;
                    }
                }
            }
        });
    }
</script>
The player’s state is defined with its data property. Here in the above example, I am using a pre-defined namespaced variable to check the state of the player (if it has started playing). If yes, I’ll set a timer to the stop the video after 5000 milliseconds (or 5 seconds).

setTimeout(e.target.stopVideo(), 5000);

You may also like: How to Embed YouTube Video in a Webpage without IFrame

That's it. The examples here in this article are just the tip of the iceberg. It shows some basic features on how to embed a YouTube video with its sound muted when the page loads, how to AutoPlay a video, how to set a default volume and how to add and use couple of events that the API provides, which will help customize the player on your website.

Thanks for reading .

← PreviousNext →


Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.
Delivered by FeedBurner