Solved

Standalone Image on Click YouTube Video

Posted on 2014-02-25
3
451 Views
Last Modified: 2014-02-25
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?
0
Comment
Question by:N R
  • 2
3 Comments
 
LVL 14

Accepted Solution

by:
quizwedge earned 500 total points
Comment Utility
You can do something like 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>

Open in new window


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

$( "#high_res_image" ).click(function() {
  $('#high_res_image").hide();
  $(#youtube_video).show();
  $('#youtube_video').('iframe')[0].src += "&autoplay=1";
});

Open in new window


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.
0
 
LVL 11

Author Comment

by:N R
Comment Utility
Hmm...not working for me here is a sample of my setup here on jsfiddle:
http://jsfiddle.net/4qFrr/

Maybe I've mistyped something in my code?
0
 
LVL 11

Author Closing Comment

by:N R
Comment Utility
Had to tweak the jquery some:
$( "#high_res_image" ).click(function() {
  $( "#youtube_video" ).show( "slow" );
  $( "#high_res_image" ).hide( "slow" );
});

Open in new window

0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now