How to mute and autoplay youtube video using JS API

Now I am going to tell you how to mute and autoplay a YouTube video using YouTube JavaScript API. Its a good idea if someone don’t want to disturb the viewers by making the video silent while auto playing.

To accomplish this task you need to understand the YouTube JavaScript API. Google suggest to use swfobject embed SWF and to detect user’s flash player version.

<script src="http://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div>
<script type="text/javascript">
    google.load("swfobject", "2.1");
    function onYouTubePlayerReady(playerId) {
        ytplayer = document.getElementById("myytplayer");
        ytplayer.playVideo();
        ytplayer.mute();
    }
    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/J2hqhNhAj_g?enablejsapi=1&playerapiid=ytplayer&allowFullScreen=true&version=3",
    "ytapiplayer", "425", "356", "8", null, null, params, atts);
</script>

How this works:

In the above code i firstly included the necessary JavaScript files one is Google’s JavaScript API at line 1 and the other is swfobject at line 2. Then on line 3 I create a DIV that will be displayed if the user’s flash player version is is not atleast 8. On line 5, I loaded the swf object using the google load method. Line 7 gets the player id, Line 8 plays the video and line 8 finaly mutes the video. Lines 7,8,9 are contained in function onYouTubePlayerReady which is automatically called when the youtube video is ready to play. Line 11 I allowScriptAccess paramater is set to always this allows the JavaScript to community with the video player. Line 12 defines the player Id which you get at line 7. And finally you embed your video by passing the full URL and the parameters which are self explanatory.

You can copy paste this code to and make experiments. For more details please visit: http://code.google.com/apis/youtube/js_api_reference.html to view the more API parameters.

Happy YouTube Integration with Auto-played Muted video :)

Tags: , , , , , , ,

Tuesday, October 19th, 2010 API, YouTube

7 Comments to How to mute and autoplay youtube video using JS API

  • Tool Schism says:

    You have a great outlook on the things you write about. Keep it up!

  • Great read, thanks for posting. Reading this blog is always a pleasure.

  • Rosalie Saal says:

    Love your site man keep up the good work

  • NG says:

    Hi, I’m trying to use your code

    I have been referencing the youtube API for loop
    http://code.google.com/apis/youtube/player_parameters.html#loop

    I would like to modify this script to do the following:
    mute the video, play a random video from the playlist and then also loop the playlist

    Thanks for your help!

  • How can i start youtube video on mute! i use the code you provide above but my WordPress site is not working! Please help

    • Faisal says:

      You just need to copy paste the entire code to the WordPress post and it should be working fine. If you still face issue can you please send me the link to your website?

  • Leave a Reply to NG