Hi all
I have a jsfiddle here - http://jsfiddle.net/5JxL7/
It’s a play button that flips a div to shop a youtube clip.
I’d like reverse the action and hide the clip by clicking the close button.
The close on click alert fires but I can’t remove the class name
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--css-->
<style type="text/css">
*{
font-family: sans-serif;
}
.hidden{
display: none;
}
.flip {
-webkit-perspective: 800;
perspective: 800;
text-align: center;
margin: 20px 0 0 0;
}
.flip .card.flipped {
-webkit-transform: rotatex(180deg);
transform: rotatex(180deg);
}
.flip .card {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front{
background: red;
color: white;
padding: 10px;
margin: 0 auto;
width: 100px;
}
.flip .card .front:hover{
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
}
.inner{margin:0px !important;}
.hero{
background-size: cover;
height: 400px;
position: relative;
}
.player iframe{
border: 5px solid red;
margin: 20px 0 0 0;
}
.player .closing{
background: black;
color: white;
display: block;
margin: 20px auto 0 auto;
padding: 10px;
width: 100px;
}
</style>
<title>Title of the document</title>
</head>
<body>
<div class="flip">
<div class="card">
<div class="face front">
<div>Play</div>
</div>
<div class="face back">
<div class="player">
<iframe width="560" height="315" src="//www.youtube.com/embed/FKkejo2dMV4" frameborder="0" allowfullscreen></iframe>
<span class="closing">Close</span>
</div>
</div>
</div>
</div>
<script>
$('.flip').click(function(){
$(this).find('.card').addClass('flipped');
$('.card .front').addClass('hidden');
});
$('.player .closing').on('click', function(){
alert('close');
$('.front').removeClass('hidden');
$('.flip .card').removeClass('flipped');
})
</script>
</body>
</html>