I'm trying to create my own poster image for a YouTube video. I'd like the video to begin playing when the poster image is clicked. The idea is to store the embed code in an attribute of the DIV containing the poster image and when the box is clicked the image is removed and the embed code pulled out and inserted.There's a jsfiddle here - http://jsfiddle.net/3JAxB/12/
But I can't get the autostart=1 to work (second line of Ready code). When I click the image I always get the video waiting for play to be hit before starting.
Does anyone see the problem?
Thanks
$(function(){ // Ready
$('div#video').attr('embed_code', "<iframe width='854' height='510' src='//www.youtube.com/embed/Q1PY_7GNfIw' frameborder='0' allowfullscreen></iframe>");
// $('div#video').attr('embed_code', "<iframe width='854' height='510' src='//www.youtube.com/embed/Q1PY_7GNfIw?autostart=1' frameborder='0' allowfullscreen></iframe>");
})
$('#video').click(function () {
var this$ = $(this);
var embedCode = this$.attr('embed_code');
this$.find('.poster').remove(); // remove poster image
this$.prepend(embedCode); // put in the YouTube video
});