<div class="ev">
            <a href="#" class="clicked">click me</a>

        <!-- youtube iframe -->
        <div class="ap">
            <iframe width="100%" height="100%" frameborder="0" src="https://www.youtube.com/embed/loFtozxZG0s"></iframe>
        </div>
    </div>

a,
a:focus,
a:hover {  
    color: #fff;
}

.ev {
padding: 170px 0;
background: #000;
text-align: center;

-webkit-transition: all .5s;
   -moz-transition: all .5s;
     -o-transition: all .5s;
        transition: all .5s;

-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;

-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
        backface-visibility: hidden;
}

.ap {
background: #000;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: -100%;

-webkit-transform-origin: 0% 100%;
   -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
     -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;

-webkit-transform: rotateX(90deg);
   -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
     -o-transform: rotateX(90deg);
        transform: rotateX(90deg);

-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
        backface-visibility: hidden;
}

.ev[data-loading] {
-webkit-transform-origin: 50% 100%;
   -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
     -o-transform-origin: 50% 100%;
        transform-origin: 50% 100%;

-webkit-transform: rotateX(-90deg) translateY(100%);
   -moz-transform: rotateX(-90deg) translateY(100%);
    -ms-transform: rotateX(-90deg) translateY(100%);
     -o-transform: rotateX(-90deg) translateY(100%);
        transform: rotateX(-90deg) translateY(100%); 
}

$('.clicked').click(function(e) {
  e.preventDefault();
  $('.ev').attr('data-loading', true);
});