I have a hidden iframe and use display:block to reveal it when user click on the thumbnail.
<iframe src="http://www.youtube.com/embed/cGEb-q5JMU0?autoplay=1" frameborder="0" allowfullscreen=""></iframe>
I also use autoplay=1 so the user doesn't have to click to start the video. The problem is that the video is playing in the background even though it's hidden.
You can do the following:
<script type="text/javascript">
function deleteVideo()
{
document.getElementById('VideoPlayer').src='';
}
function LoadVideo()
{
document.getElementById('VideoPlayer').src='http://www.youtube.com/embed/WHAT,EVER,YOUTUBE,VIDEO,YOU,WHANT';
}
</script>
<body>
<p onclick="LoadVideo()">LOAD VIDEO</P>
<p onclick="deleteVideo()">CLOSE</P>
<iframe id="VideoPlayer" width="853" height="480" src="http://www.youtube.com/WHAT,EVER,YOUTUBE,VIDEO,YOU,HAVE" frameborder="0" allowfullscreen></iframe>
</boby>
more info from How to pause a YouTube player when hiding the iframe?
