Video auto played in display none div - google-chrome

Question

I have vide an iframe with video that needs to be played in fancybox.
Here is the code:
<a id="playLink" href="#pageVideo">Link for video </a>
<div style="display:none">
<div id="pageVideo">
<iframe src="someVideo.mp4?autoplay=true" style="overflow:auto" frameborder="0" height="400" width="650"></iframe></div>
</div>
$('#homePlayLink').fancybox({
'padding' : 0,
'width' : 560,
'height' : 400
});
The problem is that in Chrome video starts to play on page load. Because it is in display none div I do not see it but I hear the audio. How to fix this, so the video plays only in fancy box After click on the link?
Thanks.

Answer 1

Your iframe src has the autoplay = true parameter; this is why it will auto play when the page loads.
How about pointing the iframe src to a blank page and then override the href when the fancybox opens?
$("#tip4").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
Take a look at http://fancybox.net/blog section 4: Show youtube clips.