video gets hidden via javascript but already starts to play (autplay-mode) even it's not visible?
===

i wanted to find a simple method to get a custom preview-image to my videos within my blog by hiding them and make them visible right after click on the preview-image. the user Dominic Green helped me to get it started with the following code. the problem is: the video already starts to play (even if it is hidden) in autoplay-mode right after the page load but i want to have the autoplay to start right after click on the preview-image...

here's my code:

    <!doctype html>  

<head>
  <meta charset="utf-8">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

	<script type="text/javascript">
	$(window).load(function(){
	$(".video").hide();

	$(".loader").click(function(){
    $(this).hide();
    $(this).parent().find(".video").show();
	});
	});  

</script>

<style type="text/css">
		
		#container .post .postimg img{
			width:100%;
			height:auto;
			}
		#container .post .postvideo{
			position:relative;
			display:block;
			width:100%;
			height:430px;
			background-color:#0F3;
			}
			#container .post .postvideo .con{
				position:absolute;
				top:0;
				left:0;
				height:100%;
				width:100%;
				z-index:1;
				}
			#container .post .postvideo .video{
				background-color:#C00;
				}
				#container .post .postvideo .video iframe{
					width:100%;
					height:100%;
					}
			#container .post .postvideo .loader{
				background-color:#06C;
				}
			#container .post .postvideo .loader img{
				width:100%;
				height:100%;
				}
  </style>

</head>

<body>
    
    <div class="post">
    	<div class="postvideo">
        	<div class="con video">
            	<iframe width="420" height="315" src="http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
            </div>
    		<div class="con loader">
           	  <img src="http://cache2.allpostersimages.com/p/LRG/27/2728/9CKND00Z/poster/gulin-darrell-pansy-flowers-floating-in-bird-bath-with-dew-drops-sammamish-washington-usa.jpg" width="758" height="388">
          </div>
        </div>
    </div><!--! end of .post -->
    
    <div class="post">
    	<div class="postvideo">
        	<div class="con video">
            <iframe src="http://player.vimeo.com/video/29017795?title=0&amp;byline=0&amp;portrait=0&amp;color=a80101&amp;autoplay=1" width="460" height="259" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
            </div>
    		<div class="con loader">
           	  <img src="http://cache2.allpostersimages.com/p/LRG/27/2728/9CKND00Z/poster/gulin-darrell-pansy-flowers-floating-in-bird-bath-with-dew-drops-sammamish-washington-usa.jpg" width="758" height="388">
          </div>
        </div>
    </div><!--! end of .post -->
 
  
</body>
</html>