Ajax / jQuery Fade in, Fade Out...

Hi

I am looking for the following functionality in jQuery, HTML, CSS...

I need to make an Image Fade out on click, and load the HTML5 Iframe Player embed from Youtube.

<iframe class="youtube-player" type="text/html" width="640" height="385" src="[url removed, login to view]" frameborder="0">

</iframe>

The Iframe Height , Width , and "VIDEO_ID" need to be read from the "Links Data"

EG:

<a data-video_id="FdDr-QfjNuI" data-height="259" data-width="460" class="play" href="#" style="display: block;">Play</a>

<img width="460" height="259" src="/uploads/videos/[url removed, login to view]" alt="What We Do: Approach" style="display: block;">

</div>

So on the actual Anchor, we have the following.

1.) data-video_id="FdDr-QfjNuI"

2.) data-height="259"

3.) data-width="460"

The actual JavaScript will Grab that Data ,and Build the HTML Iframe Code, to insert in place of the Parent Image.

Here is a Site that has a working example, using a different video provider.

[url removed, login to view]

Click on the "Approach" video, and The "User Experience" video, and see how the Video Loads in Place..

This is exactly what I need to do with the HTML Iframe Code...

Do a Good Job,and Ill pay you as fast as you can handle!

Would like this done asap!!

Thanks

HTML jQuery/プロトタイプ

プロジェクトID: #1343254

プロジェクトについて