How To Embed Youtube Videos With Autoplay And Volume Off

 interface, Web Design  Add comments
Jul 232012
 

It’s nice to have something happen when visitors arrive at your webpage. Videos and music are nice, but you can’t control the volume the user’s speakers will be set to, and custom applications can end up being too loud and startle users while sending them frantically looking for volume controls, or quickly clicking away.

An embedded Youtube video provides a familiar experience to the user, and has several features that make it fit nicely almost anywhere.

Below is the script you will need to embed your video or playlist. This code starts the video with the volume muted, and hides the controls until the user mouses over the video frame. Note: this will not work properly if you test it from your desktop. Once uploaded toy our site, it should work fine.

 

This embeds a playlist:

<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/mOLp4doE51Q&list=PL
86C090F73345FED6&feature=plpp_play_all?
enablejsapi=1&playerapiid=ytplayer&allowFullScreen=true&version=3&loop=1&autohide=1″,
 “ytapiplayer”, “100%”, “380”, “8”, null, null, params, atts)

</script>

To embed a single video, just change the bold part to the normal Youtube video URL:

swfobject.embedSWF(“http://www.youtube.com/v/mOLp4doE51Q?enablejsapi=1&playerapiid=ytplayer&allowFullScreen=true&version=3&loop=1&autohide=1″,
“ytapiplayer”, “100%”, “380”, “8”, null, null, params, atts)

 

Here are some links that may be helpful:

This post and a better representation of the code are available here.

YouTube Embedded Players and Player Parameters

YouTube JavaScript Player API Reference