Youtube API automatically starts playing songs

I am using below code to play youtube shared videos but I want user to start the videos but as soon as the page loaded it starts playing the video. I want user to click on that link then it should start playing

<script type="text/javascript">

    function updateHTML(elmId, value) {
      document.getElementById(elmId).innerHTML = value;
    }

    function setytplayerState(newState) {
      if(newState==3 || newState==-1)
      {
        $('ld').show();
      }
      else
      {
        $('ld').hide();
      }
    }

    function onYouTubePlayerReady(playerId) {
      ytplayer = document.getElementById("myytplayer");
      setInterval(updateytplayerInfo, 250);
      updateytplayerInfo();
      loadNewVideo('<?=$w ?>');
      ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    }

    function onytplayerStateChange(newState) {
      setytplayerState(newState);
    }
    function minute(secVar0)
    {
                         // The initial data, in seconds
minVar = Math.floor(secVar0/60);  // The minutes
secVar = Math.floor(secVar0 % 60);              // The balance of seconds
return minVar+":"+secVar;
    }
    function updateytplayerInfo() {

      updateHTML("videoduration", minute(getDuration()));
      updateHTML("videotime", minute(getCurrentTime()));
      //updateHTML("startbytes", );

      var sbyte=getStartBytes();
      var tbyte=getBytesTotal();
      var lbyte= getBytesLoaded();

      var l=Math.floor(400*lbyte/tbyte);

      //$('loaded').style.width=l+"px";


      var c=getCurrentTime();
      var t=getDuration();

      slider.setValue(c/t);
    }

    // functions for the api calls
    function loadNewVideo(id, startSeconds) {
      if (ytplayer) {
        ytplayer.loadVideoById(id, parseInt(startSeconds));
      }
    }

    function cueNewVideo(id, startSeconds) {
      if (ytplayer) {
        ytplayer.cueVideoById(id, startSeconds);
      }
    }

    function play() {
      if (ytplayer) {
        ytplayer.playVideo();
        $('playpause').onclick=function(){pause()};
        $('playpauseimg').src='pause.jpg';
      }
    }

    function pause() {
      if (ytplayer) {
        ytplayer.pauseVideo();
        $('playpause').onclick=function(){play()};
        $('playpauseimg').src='play.jpg';
      }
    }

    function stop() {
      if (ytplayer) {
        ytplayer.stopVideo();
      }
    }

    function getPlayerState() {
      if (ytplayer) {
        return ytplayer.getPlayerState();
      }
    }

    function seekTo(seconds) {
      if (ytplayer) {
      var t=getDuration();
      var s;
      s=t*seconds;
        ytplayer.seekTo(s, true);
      }
    }

    function getBytesLoaded() {
      if (ytplayer) {
        return ytplayer.getVideoBytesLoaded();
      }
    }

    function getBytesTotal() {
      if (ytplayer) {
        return ytplayer.getVideoBytesTotal();
      }
    }

    function getCurrentTime() {
      if (ytplayer) {
        return ytplayer.getCurrentTime();
      }
    }

    function getDuration() {
      if (ytplayer) {
        return ytplayer.getDuration();
      }
    }

    function getStartBytes() {
      if (ytplayer) {
        return ytplay开发者_如何学Pythoner.getVideoStartBytes();
      }
    }

    function mute() {
      if (ytplayer) {
        ytplayer.mute();
      }
    }

    function unMute() {
      if (ytplayer) {
        ytplayer.unMute();
      }
    }

    function getEmbedCode() {
      alert(ytplayer.getVideoEmbedCode());
    }

    function getVideoUrl() {
      alert(ytplayer.getVideoUrl());
    }

    function setVolume(newVolume) {
      if (ytplayer) {
        ytplayer.setVolume(newVolume);
      }
    }

    function getVolume() {
      if (ytplayer) {
        return ytplayer.getVolume();
      }
    }

    function clearVideo() {
      if (ytplayer) {
        ytplayer.clearVideo();
      }
    }


</script>

<div id="ply">
<div id="ytapiplayer">

</div>
<script type="text/javascript">

  var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };

  var atts = { id: "myytplayer" };
  swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", 
                     "ytapiplayer", "1", "1", "8", null, null, params, atts);

</script>
</div>

<div>
<table class="controls">
<tr>
<td>
     <a href="javascript:void(0);" onclick="pause()" id="playpause"><img src="pause.jpg" id="playpauseimg" /></a>
</td>
<td>

Pass autoplay: 0 as one of the parameters.

var params = { allowScriptAccess: "always", bgcolor: "#cccccc", autoplay: 0 };
var atts = { id: "myytplayer" };
// etc...

http://code.google.com/apis/youtube/player_parameters.html#autoplay

Adding a autoplay parameter as 0 at the end of swfobject url should solve the problem

swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer&autoplay=0", "ytapiplayer", "1", "1", "8", null, null, params, atts);