Standalone Image onClick YouTube Video

[Nathan]

I have a YouTube video on my website that before played shows the preview image that's very pixelated.  I want to put a high resolution image on my website that on click will then play the youtube video, is there a way to do this?

[Nathan]

Fixed with the following:

<img id="high_res_image" src="high_res_image.jpg">
<div id="youtube_video" style="display:none;">
<!-- Put YouTube Video code here -->
</div>

This will show the image and hide the YouTube video. Then, in jQuery you'll need the following:

$( "#high_res_image" ).click(function() {
$( "#youtube_video" ).show( "slow" );
$( "#high_res_image" ).hide( "slow" );
});

What this will do is hide the high resolution image, show the YouTube div and then add autoplay=1 to the YouTube video iframe to (hopefully) start autoplay. Haven't tested it, but I think it should work in theory.