2

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
    });
Steve
  • 4,534
  • 9
  • 52
  • 110
  • see http://stackoverflow.com/questions/5349716/how-to-make-youtube-embed-code-video-auto-start you need to use autoplay=1 not autostart – Gogs Mar 17 '14 at 16:35

2 Answers2

3

It's ?autoplay=1, not ?autostart=1. See the YouTube Embedded Players and Player Parameters

autoplay (supported players: AS3, AS2, HTML5) Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads.

WORKING EXAMPLE HERE

$(function(){
    $('div#video').attr('embed_code', "<iframe width='854' height='510' src='//www.youtube.com/embed/Q1PY_7GNfIw?autoplay=1' frameborder='0' allowfullscreen></iframe>");
});
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
1

it's not autostart it's autoplay!

replace autostart by autoplay and it will work! (tested in your fiddle)