iframe onclick animate or toggle

Question

I have to implement a design where a div covers 15-20% of a video iframe (youtube video, vimeo etc). When the user clicks on the video and the video starts, the div should slide down (animate marginTop: 0). Then, when the user clicks again on the video to stop it, the div should come up (marginTop: -100px).

This is the script I'm using to capture the click event on the iframe and to animate the div to slide down.

jQuery(document).ready( function() {
    var overiFrame = -1;
    jQuery('iframe').hover( function() {
        overiFrame = jQuery(this).closest('.video-container');
    }, function() {
        overiFrame = -1
    });
    jQuery(window).blur( function() {
        if( overiFrame != -1 )
            jQuery('.header-container').animate({
                marginTop: '0'
            })
    });
});    

I don't know how to capture the second click on the iframe and to slide the div back up. I tried with toggleClass but after the script adds the class it won't remove it.

Later edit

I made some modifications to the script but it still doesn't work as it should. It only works if the user clicks one time on the iframe, one time outside the iframe and so on. If the user clicks multiple times inside the iframe, the animation doesn't work.

jQuery(document).ready( function() {
    var overiFrame = -1;
    jQuery('iframe').hover( function() {
        overiFrame = jQuery(this).closest('.video-container');
    }, function() {
        overiFrame = -1
    });

    jQuery(window).blur( function() {
        if( overiFrame != -1 ) {
            if (jQuery('.header-container').hasClass('animate')) {
                jQuery('.header-container').removeClass('animate')
        }   else {
                jQuery('.header-container').addClass('animate')
            } 
        }

    });
});    

This is a screenshot of the design I'm trying to implement:

Answer 1

You can't fully realize what are you want, because click event can't be listen from crossdomain iframe, but i have one idea how to partially do that.

This is just example and if you like idea you need to customize my solution.

Hint is - use overlay to get click, hide overlay to let user click to video, show overlay again to get other clicks. Of course tooltip also toggles from clicks and animation you need to set by yourself.

Bad news - all clicks on video need to be a doubleclick

html

<iframe id="iframe" src="http://www.youtube.com/embed/xFa2_PVMeDQ?rel=0" allowfullscreen="" frameborder="0"></iframe>
<div id="tooltip">tooltip</div>
<div id="overlay"></div>

css

#iframe {
    width: 500px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#tooltip {
    position: absolute;
    top: 200px;
    width: 100px;
    height: 50px;
    background: white;
    z-index: 3;
    text-align: center;
    line-height: 2em;
}
#overlay {
    width: 500px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

jquery

$("#overlay").click(function () {
    $(this).hide();
$('#tooltip').toggle(
 function(){
     $('#another-element').show();
}
,
function(){
    $('#another-element').hide();
}
);
    setTimeout(function () {
        $("#overlay").show();
    }, 500);
});

fiddle

Answer 2

This is impossible for cross domain iframes to capture click events. Actually, it's not the fully correct solution as e.g. for youtube there are some other controls (like buttons to change video quality, watch on YouTube site, progress bar for changing position, etc). Each click will cause appearing/disappearing of your overlay.

If you have a limited set of video providers - I would recommend to use an appropriate API of these providers.

• E.g. for youtube videos there's JS API to control the video.Also you can subscribe to an appropriate event and define your behavior.
• For vimeo - the same.