Your HTML:
<iframe id="ytplayer" type="text/html" width="120" height="100" src="http://www.youtube.com/embed/'+id+'?hd=1&rel=0&autohide=1&showinfo=0" frameborder="0"/>
Required jQuery:
var player; function onYouTubePlayerAPIReady() { player = new YT.Player('video', { height: '200', width: '200', playerVars: { 'autoplay': 1, 'controls': 0 }, events: { 'onReady': onPlayerReady } }); } function onPlayerReady(event){ event.target.playVideo(); $("#play").on('click', function() { player.playVideo(); }); $("#pause").on('click', function() { player.stopVideo(); }); }
Working example:
http://jsfiddle.net/8kN6Z/218/
As you can see, it is very important to add the &enablejsapi=1 src parameter to you.
In addition, passing the video id through the initialization of your player did not work.
What do you want to achieve
What you want to achieve is to start the video by clicking on the image (at least if I understood correctly). As you can see in JsFiddle , now I have created a play button that launches the video. Now you can replace the image or something else that you want to initialize the video.
Hope this helps you!
Good luck