Jump to content

Standalone Image onClick YouTube Video


Nathan
 Share

Recommended Posts

  • Administrators

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?

Link to comment
Share on other sites

  • Administrators

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...