Click in iframe

by Marventus

HTML

<div class="wrapper on">
    <div class="hider" id="one"></div>
    <iframe src="http://www.youtube.com/embed/C4pcg7bXgmU?wmode=opaque&enablejsapi=1" height="350" width="622" frameborder="0"></iframe>
</div>
<div class="wrapper on" id="two">
    <div class="hider"></div>
    <iframe src="http://www.youtube.com/embed/C4pcg7bXgmU?wmode=opaque&enablejsapi=1" height="350" width="622" frameborder="0"></iframe>
</div>

CSS

div {
    display: inline-block;
    margin-bottom: 20px;
}
.wrapper {
    position: relative;
}
.wrapper * {
    opacity: 1;
}
.wrapper.on {
    background: #2CAE85;
}
.wrapper.on iframe {
    opacity: 0;
}
.hider {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 2;
}
.wrapper .hider {
    background: url("http://www.flaticon.com/png/256/375.png") no-repeat center center;
	-khtml-transition: opacity 0.3s, background 0.3s;
	-moz-transition: opacity 0.3s, background 0.3s;
	-ms-transition: opacity 0.3s, background 0.3s;
	-opera-transition: opacity 0.3s, background 0.3s;
	-webkit-transition: opacity 0.3s, background 0.3s;
	transition: opacity 0.3s, background 0.3s;
}
.wrapper .hider.pause {
    background: url("http://www.flaticon.com/png/256/8802.png") no-repeat center center;
}
.wrapper .hider.nobd {
    opacity: 0;
}
.wrapper.on .hider {
    background: url("http://thegeekinvasion.com/wp-content/plugins/tgi-spoiler-safe/img/tgiss-vid-256.png") no-repeat center center;
    opacity: 1;
}

JavaScript

jQuery(function($) {
    var h = "<div class='hider' />",            
        ctrl;
    $(".wrapper")
        .click(function(e) {
            if( e.metaKey || e.ctrlKey ) {
                if( $(this).hasClass("on") ) {
                    $(this).removeClass("on");
                } else {
                    $(this).addClass("on");
                }
            } else {
                if( !$(this).hasClass("on") ) {
                    var hider = $(this).find(".hider");
                    hider.removeClass("nobd")
                        .delay(300).queue(function(next) {
                            $(this).addClass("nobd");
                            next();
                        })
                        .delay(300).queue(function(next) {
                            if( hider.hasClass("pause") )
                                hider.removeClass("pause");
                            else
                                hider.addClass("pause");
                            next();
                        })
                    ;
                }
            }         
        })
        .hover(function() {
            ctrl = $(this);
        })

    ;
    $(window)
        .load(function() {
            $(".hider")
                .height( $(".wrapper").height() )
                .width( $(".wrapper").width() )
            ;
    });
});