<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="moviecard">
<div class="movie-poster play-trailer"></div>
<div id="movie-content">
<div class="movie-ratings"><span class="star">★</span><span class="score">5.6</span><span class="score-out-of">/ 10 (IMDB)</span></div>
<div class="movie-title"><a href="http://www.imdb.com/title/tt3397884" target="_blank">Battleship</a><span class="movie-year">2012</span></div>
<div class="movie-details"><span class="movie-rating">R</span><span class="movie-duration">2h 11min</span><span class="movie-genre">Action, Adventure, Sci-Fi</span><span class="movie-date">18 May 2012 (USA) </span></div>
<div class="movie-castcrew"><span class="title">Director</span><span class="name">Peter Berg</span></div>
<div class="movie-castcrew"><span class="title">Writer</span><span class="name">Erich Hoeber & Jon Hoeber </span></div>
<div class="movie-castcrew"><span class="title">Cast</span><span class="name">Alexander Skarsgård, Brooklyn Decker, Liam Neeson</span></div>
<div class="movie-synopsis">An international fleet of ships encounters an alien armada and discovers their destructive goals. To defeat these goals, they are forced to fight an intense battle on sea, land and air</div>
<button class="movie-trailer-btn play-trailer" type="button">play trailer</button>
</div>
<div class="movie-trailer"><a class="back-btn">back</a>
<div id="youvideo">
<iframe src="https://www.youtube.com/embed/JpoabtbEJOI" frameborder="0" allowfullscreen allowScriptAccess="always"></iframe>
</div>
</div>
</div>
@charset "UTF-8";
* {
box-sizing: border-box;
}
body {
background: #B5B5B5;
}
.moviecard {
font-family: 'Helvetica', sans-serif, 'Ariel';
position: relative;
background: #ffffff;
color: #555555;
margin: 50px auto;
width: 850px;
max-width: 900px;
min-height: 300px;
padding: 30px 290px 30px 30px;
-moz-box-shadow: -5px 5px 15px;
-webkit-box-shadow: -5px 5px 15px;
box-shadow: -5px 5px 15px;
border-radius: 5px;
}
.moviecard #movie-content {
opacity: 1;
width: 100%;
display: table;
transition: all 500ms ease-out;
position: relative;
}
.moviecard .movie-title {
font-size: 36px;
padding-bottom: 6px;
color: #333333;
}
.moviecard .movie-title .movie-year {
margin-left: 12px;
font-size: 16px;
}
.moviecard .movie-title a {
color: #333333;
text-decoration: none;
}
.moviecard .movie-title a:hover {
color: #858585;
}
.moviecard .movie-details {
font-size: 12px;
padding-bottom: 24px;
margin-bottom: 12px;
border-bottom: 1px solid #dbdbdb;
}
.moviecard .movie-details span {
padding: 0px 6px;
border-right: 1px solid #dbdbdb;
}
.moviecard .movie-details span:last-child {
border: none;
}
.moviecard .movie-castcrew {
padding-top: 12px;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.moviecard .movie-castcrew span.title {
color: #333333;
display: inline-block;
width: 80px;
font-weight: 600;
}
.moviecard .movie-synopsis {
margin: 24px 0px;
padding-top: 24px;
border-top: 1px solid #dbdbdb;
max-height: 130px;
height: 130px;
overflow-y: hidden;
width: 100%;
}
.moviecard .movie-ratings {
position: absolute;
right: 0px;
}
.moviecard .movie-ratings span.star {
display: inline-block;
margin-right: 12px;
color: #F0DE00;
font-size: 36px;
}
.moviecard .movie-ratings span.score {
font-size: 30px;
color: #333333;
}
.moviecard .movie-trailer-btn {
text-transform: uppercase;
outline: none;
padding: 15px 50px;
position: relative;
background: none;
border: none;
cursor: pointer;
font-size: 16px;
font-weight: 600;
}
.moviecard .movie-trailer-btn:hover {
text-decoration: underline;
}
.moviecard .movie-trailer-btn:hover:before {
color: #333333;
}
.moviecard .movie-trailer-btn:hover:after {
border-color: #333333;
}
.moviecard .movie-trailer-btn:before {
content: '▸';
font-size: 30px;
color: #333333;
position: absolute;
top: 2px;
left: 20px;
}
.moviecard .movie-trailer-btn:after {
content: "";
width: 20px;
height: 20px;
border: 1px solid #333333;
border-radius: 50%;
position: absolute;
left: 18px;
top: 12px;
}
.moviecard .movie-trailer {
width: 0px;
opacity: 0;
overflow: hidden;
position: absolute;
right: 0px;
height: 100%;
transition: all 500ms;
top: 0px;
background: #ffffff;
z-index: 1;
padding: 60px 40px 60px 60px;
border-radius: 5px;
}
.moviecard .movie-trailer a.back-btn {
color: #333333;
text-decoration: none;
font-weight: 600;
padding: 6px 12px 6px 18px;
position: absolute;
top: 12px;
left: 300px;
text-transform: uppercase;
font-size: 12px;
cursor: pointer;
}
.moviecard .movie-trailer a.back-btn:before {
content: '⌜';
position: absolute;
left: 5px;
top: 1px;
transform: rotate(-45deg);
font-size: 20px;
}
.moviecard .movie-trailer a.back-btn:hover {
color: #333;
}
.moviecard .movie-trailer iframe {
width: 100%;
height: 100%;
}
.moviecard .movie-poster {
position: absolute;
background: url("http://graphicdesignjunction.com/wp-content/uploads/2012/05/large/movie-poster-20.jpg");
background-color: #dbdbdb;
background-size: 360px 540px;
background-repeat: no-repeat;
height: 0;
width: 360px;
height: 540px;
right: -100px;
top: -20px;
-moz-box-shadow: -2px 2px 7px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: -2px 2px 7px rgba(0, 0, 0, 0.6);
box-shadow: -2px 2px 7px rgba(0, 0, 0, 0.6);
cursor: pointer;
transition: all 500ms ease-out;
z-index: 10;
}
.moviecard .movie-poster:before {
content: '▸';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 200px;
color: rgba(255, 255, 255, 0.4);
}
.moviecard .movie-poster:hover:before {
color: rgba(255, 255, 255, 0.8);
}
.moviecard.movie-view-trailer .movie-poster {
right: 600px;
}
.moviecard.movie-view-trailer #movie-content {
opacity: 0;
width: 0px;
}
.moviecard.movie-view-trailer .movie-trailer {
width: 100%;
opacity: 1;
padding-left: 300px;
}
.moviecard.movie-view-trailer .movie-trailer #youvideo {
height: 100%;
}
$(document).ready(function(){
$(".play-trailer").click(function(){
toggleVideo('show');
$(".moviecard").addClass("movie-view-trailer");
});
$(".back-btn").click(function(){
$(".moviecard").removeClass("movie-view-trailer");
toggleVideo('hide');
});
});
function toggleVideo(state) {
// if state == 'hide', hide. Else: show video
var div = document.getElementById("youvideo");
var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
div.style.display = state == 'hide' ? 'none' : '';
func = state == 'hide' ? 'pauseVideo' : 'playVideo';
iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
