Hide a DIV via click and make another one visible instead via JavaScript?

Question

ok, it's hard to tell (sorry for my broken english)... i want to create a custom preview-image to my embedded media (you-tube and stuff)...

here's how i think it could work:

i have a DIV with a preview-image of a video and a custom play-button
right after click on that image/button the DIV hides and...
...another DIV appears instead of that with the original iframe-embed-code
the video starts automatically

here's a little example (but i don't know how exactly that was done.. via fancybox?): http://www.crackajack.de/2012/07/25/the-mayor-of-london-introduces-the-olympic-games/

any ideas how i could do that "easily"?

thanks alot!

Dominic Green · Accepted Answer · 2012-07-25 17:12:28Z

2

if this is just for display reasons and not performance then its probably easiest to load both divs, with your loading div positioned absolutely over the video and the video hidden. Then once you click you can use the youtube api to auto play.

The hide and show part is here http://jsfiddle.net/TUMcm/ and the youtube api is here https://developers.google.com/youtube/js_api_reference

BIT MORE INFO

SO if your player was this

<embed id="playerid" width="100%" height="100%" allowfullscreen="true" allowscriptaccess="always" quality="high" bgcolor="#000000" name="playerid" style="" src="http://www.youtube.com/apiplayerbeta?enablejsapi=1&playerapiid=normalplayer" type="application/x-shockwave-flash">

In the click function you would put something like

var myPlayer = document.getElementById('playerid');
myPlayer.playVideo();

edited Jul 25, 2012 at 17:12

answered Jul 25, 2012 at 15:03

Dominic Green

10.3k4 gold badges32 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jochen Schmidt Over a year ago

ok, as i said: it wokrs great! but if i set the youtube-player to autplay the video starts in the background (even before i just clicked that "loader" div)... strange....

Dominic Green Over a year ago

You dont want to set the you tube video to auto play on load, you dont want it to play. Instead you want to add a method in the click function to fire the youtube api and play

Jochen Schmidt Over a year ago

thanks.. but i'm using the new iframe-code.. like this:<iframe width="560" height="315" src="youtube.com/embed/BqJGUMxi8YY?rel=0&autoplay=1" frameborder="0" allowfullscreen>

lbstr · Accepted Answer · 2012-07-25 15:07:28Z

2

Something like this should get you started:

http://jsfiddle.net/lbstr/YdwEF/

Since you showed no markup, here's my idea of how you might do it:

<div class="container">
    <div class="preview">
        <!-- Some preview image here -->
    </div>
    <div class="media">
        <!-- Some embed code here -->
    </div>
</div>

With this CSS:

.container { position: relative; }
.container .preview, 
.container .media { width: 500px; height: 350px; position: absolute; top: 0; left: 0; }
.container .preview { background-color: blue; z-index: 2; }
.container .media { background-color: red; z-index: 1; }

And this JS (jQuery):

$('.container .preview').click(function(){
    $(this).siblings('.media').css("z-index", 3);
});

edited Jul 25, 2012 at 15:07

answered Jul 25, 2012 at 15:00

lbstr

2,84220 silver badges29 bronze badges

Collectives™ on Stack Overflow

Hide a DIV via click and make another one visible instead via JavaScript?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related