<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="card-movie-wrapper card-movie-wrapper--centered">
<div class="card-movie-carousel">
<div class="card-movie card-movie--light card-movie--looper card-movie--active">
<div class="card-movie__content">
<div class="card-movie__title">Looper</div>
<div class="card-movie__details">
<span class="card-movie__details-item">2012</span>
<span class="card-movie__details-item">119 mins</span>
<ul class="card-movie__details-item card-movie__details-list">
<li>Action</li>
<li>Crime</li>
<li>Sci-fi</li>
</ul>
</div>
<!-- /.card-movie__details -->
<div class="card-movie__description">
<p>In 2074, when the mob wants to get rid of someone, the target is sent into the past, where a hired gun awaits - someone like Joe.</p>
</div>
<!-- /.card-movie__description -->
</div>
<!-- /.card-movie__content -->
<div class="card-movie__rating">7.5</div>
<div class="card-movie__player" data-trailer="5kGFyVKmqA0">
</div>
<!-- /.card-movie__player -->
</div>
<!-- /.card-movie card-movie--looper -->
<div class="card-movie card-movie--dark card-movie--tron">
<div class="card-movie__content">
<div class="card-movie__title">Tron: Legacy</div>
<div class="card-movie__details">
<span class="card-movie__details-item">2010</span>
<span class="card-movie__details-item">125 mins</span>
<ul class="card-movie__details-item card-movie__details-list">
<li>Action</li>
<li>Adventure</li>
<li>Fantasy</li>
<li>Sci-fi</li>
</ul>
</div>
<!-- /.card-movie__details -->
<div class="card-movie__description">
<p>The son of a virtual world designer goes looking for his father and ends up inside the digital world that his father designed. He meets his father's corrupted creation and a unique ally who was born inside the digital world.</p>
</div>
<!-- /.card-movie__description -->
</div>
<!-- /.card-movie__content -->
<div class="card-movie__rating">6.8</div>
<div class="card-movie__player" data-trailer="L9szn1QQfas">
</div>
<!-- /.card-movie__player -->
</div>
<!-- /.card-movie card-movie--tron -->
<div class="card-movie card-movie--light card-movie--garden-state">
<div class="card-movie__content">
<div class="card-movie__title">Garden State</div>
<div class="card-movie__details">
<span class="card-movie__details-item">2004</span>
<span class="card-movie__details-item">102 mins</span>
<ul class="card-movie__details-item card-movie__details-list">
<li>Comedy</li>
<li>Drama</li>
<li>Romance</li>
</ul>
</div>
<!-- /.card-movie__details -->
<div class="card-movie__description">
<p>A quietly troubled young man returns home for his mother's funeral after being estranged from his family for a decade.</p>
</div>
<!-- /.card-movie__description -->
</div>
<!-- /.card-movie__content -->
<div class="card-movie__rating">7.6</div>
<div class="card-movie__player" data-trailer="u82n0e1mgmQ">
</div>
<!-- /.card-movie__player -->
</div>
<!-- /.card-movie card-movie--garden-state -->
<div class="card-movie card-movie--light card-movie--interstellar">
<div class="card-movie__content">
<div class="card-movie__title">Interstellar</div>
<div class="card-movie__details">
<span class="card-movie__details-item">2014</span>
<span class="card-movie__details-item">169 mins</span>
<ul class="card-movie__details-item card-movie__details-list">
<li>Adventure</li>
<li>Drama</li>
<li>Sci-fi</li>
</ul>
</div>
<!-- /.card-movie__details -->
<div class="card-movie__description">
<p>With our time on Earth coming to an end, a team of explorers undertakes the most important mission in human history; traveling beyond this galaxy to discover whether mankind has a future among the stars.</p>
</div>
<!-- /.card-movie__description -->
</div>
<!-- /.card-movie__content -->
<div class="card-movie__rating">8.7</div>
<div class="card-movie__player" data-trailer="3WzHXI5HizQ">
</div>
<!-- /.card-movie__player -->
</div>
<!-- /.card-movie card-movie--interstellar -->
<div class="card-movie card-movie--light card-movie--walter-mitty">
<div class="card-movie__content">
<div class="card-movie__title">Walter Mitty</div>
<div class="card-movie__details">
<span class="card-movie__details-item">2013</span>
<span class="card-movie__details-item">114 mins</span>
<ul class="card-movie__details-item card-movie__details-list">
<li>Adventure</li>
<li>Comedy</li>
<li>Drama</li>
</ul>
</div>
<!-- /.card-movie__details -->
<div class="card-movie__description">
<p>When his job along with that of his co-worker are threatened, Walter takes action in the real world embarking on a global journey that turns into an adventure more extraordinary than anything he could have ever imagined.</p>
</div>
<!-- /.card-movie__description -->
</div>
<!-- /.card-movie__content -->
<div class="card-movie__rating">7.4</div>
<div class="card-movie__player" data-trailer="QD6cy4PBQPI">
</div>
<!-- /.card-movie__player -->
</div>
<!-- /.card-movie card-movie--walter-mitty -->
<div class="card-movie card-movie--dark card-movie--cloud-atlas">
<div class="card-movie__content">
<div class="card-movie__title">Cloud Atlas</div>
<div class="card-movie__details">
<span class="card-movie__details-item">2012</span>
<span class="card-movie__details-item">172 mins</span>
<ul class="card-movie__details-item card-movie__details-list">
<li>Drama</li>
<li>Sci-Fi</li>
</ul>
</div>
<!-- /.card-movie__details -->
<div class="card-movie__description">
<p>An exploration of how the actions of individual lives impact one another in the past, present and future, as one soul is shaped from a killer into a hero, and an act of kindness ripples across centuries to inspire a revolution.</p>
</div>
<!-- /.card-movie__description -->
</div>
<!-- /.card-movie__content -->
<div class="card-movie__rating">7.5</div>
<div class="card-movie__player" data-trailer="hWnAqFyaQ5s">
</div>
<!-- /.card-movie__player -->
</div>
<!-- /.card-movie card-movie--cloud-atlas -->
</div>
<!-- /.card-movie-carousel -->
<div class="card-movie-navigation">
<ul class="card-movie-navigation__list" data-navigation>
<li class="is-active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- /.card-movie-navigation__list -->
<button type="button" data-play></button>
</div>
<!-- /.card-movie-navigation -->
</div>
<!-- /.card-movie-wrapper -->
html {
box-sizing: border-box;
}
body {
color: #676767;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}
*,
*:before,
*:after {
box-sizing: inherit;
line-height: inherit;
}
.card-movie__details:after, .card-movie__details-list:after {
clear: both;
content: '';
display: table;
}
.card-movie-wrapper {
box-shadow: 0px 0px 100px 25px rgba(0, 0, 0, 0.2);
height: 440px;
position: relative;
width: 840px;
}
.card-movie-wrapper:hover .card-movie-carousel {
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
bottom: 60px;
right: 40px;
}
.card-movie-wrapper--centered {
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
position: absolute;
top: 50%;
}
.card-movie-carousel {
-webkit-transition: all 250ms ease-in-out 250ms;
-moz-transition: all 250ms ease-in-out 250ms;
transition: all 250ms ease-in-out 250ms;
height: 440px;
width: 840px;
position: absolute;
bottom: 0;
right: 0;
overflow: hidden;
}
.card-movie-navigation {
background-color: #fff;
bottom: 0;
height: 100%;
overflow: hidden;
position: absolute;
right: 0;
width: 100%;
z-index: 15;
}
.card-movie-navigation__list {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
right: 14px;
top: 50%;
width: 18px;
}
.card-movie-navigation__list li {
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
background-color: #ccc;
border-radius: 100%;
cursor: pointer;
height: 12px;
margin: 0 auto 6px;
width: 12px;
}
.card-movie-navigation__list li:last-child {
margin-bottom: 0;
}
.card-movie-navigation__list li.is-active {
height: 18px;
width: 18px;
}
.card-movie-navigation__list li:hover {
background-color: #bbb;
}
.card-movie-navigation button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
bottom: 0;
color: #aac8ca;
cursor: pointer;
font-size: 14px;
line-height: 60px;
margin: 0;
outline: none;
padding: 0;
position: absolute;
right: 40px;
}
.card-movie-navigation button:before {
content: 'Watch Trailer';
}
.card-movie-navigation button:after {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
border-bottom: 6px solid transparent;
border-left: 6px solid #dce9e9;
border-top: 6px solid transparent;
content: '';
height: 0;
margin-right: 6px;
position: absolute;
right: 100%;
top: 50%;
width: 0;
}
.card-movie-navigation button.is-playing:before {
content: 'Hide Trailer';
}
.card-movie-navigation button.is-playing:after {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
margin-top: -6px;
}
.card-movie {
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
background-size: cover;
bottom: 0;
height: 100%;
overflow: hidden;
position: absolute;
right: 0;
opacity: 0;
width: 100%;
z-index: 20;
}
.card-movie__content {
left: 330px;
position: absolute;
top: 150px;
}
.card-movie__title {
font-size: 60px;
font-weight: 700;
line-height: 1;
margin-left: -4px;
text-transform: uppercase;
}
.card-movie__details {
margin-bottom: 30px;
margin-top: 15px;
}
.card-movie__details-item {
display: block;
float: left;
margin-right: 20px;
}
.card-movie__details-list li {
float: left;
margin-right: 5px;
padding-right: 6px;
position: relative;
}
.card-movie__details-list li:after {
content: '|';
position: absolute;
right: 0;
}
.card-movie__details-list li:last-child {
margin-right: 0;
}
.card-movie__details-list li:last-child:after {
display: none;
}
.card-movie__description {
font-size: 14px;
max-width: 390px;
}
.card-movie__rating {
bottom: 16.66667px;
font-size: 18px;
font-weight: 700;
line-height: 50px;
position: absolute;
right: 16.66667px;
text-align: center;
width: 50px;
}
.card-movie__rating:after {
border-radius: 100%;
border: 2px solid #ee927b;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.card-movie__player {
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 0;
left: 50%;
position: absolute;
top: 50%;
width: 0;
z-index: 20;
}
.card-movie--playing .card-movie__player {
height: 440px;
width: 840px;
}
.card-movie__player iframe {
height: 100%;
width: 100%;
}
.card-movie--active {
opacity: 1;
z-index: 25;
}
.card-movie--light {
background-color: #effdfd;
}
.card-movie--light [class*='__title'] {
color: #000;
}
.card-movie--dark {
background-color: #000;
color: #fff;
}
.card-movie--dark [class*='__title'] {
color: #fff;
}
.card-movie--looper {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/looper.png");
}
.card-movie--tron {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/tron.png");
}
.card-movie--interstellar {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/interstellar.png");
background-color: #fffffa;
}
.card-movie--garden-state {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/garden-state.png");
}
.card-movie--walter-mitty {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/walter-mitty.png");
}
.card-movie--cloud-atlas {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/cloud-atlas.png");
}
// global vars
var players = [],
current = 0;
// YouTube iFrame API Ready
function onYouTubeIframeAPIReady() {
$('[data-trailer]').each(function() {
var player,
id = $(this).data('trailer');
$(this).html('<iframe id="player_' + id + '" src="https://www.youtube.com/embed/' + id + '?enablejsapi=1&autohide=1&showinfo=0&theme=light" frameborder="0" allowfullscreen></iframe>');
player = new YT.Player('player_' + id, {
events: {
'onStateChange': onPlayerStateChange
}
});
players.push(player);
});
}
// YouTube On Player State Change
function onPlayerStateChange(event) {
var player = players[current];
switch(event.data) {
case YT.PlayerState.ENDED:
player.stopVideo();
player.seekTo(0);
$('.card-movie--playing').removeClass('card-movie--playing');
$('[data-play]').removeClass('is-playing');
; break;
}
}
$(function() {
$('[data-play]').on('click', function() {
var $card = $('.card-movie--active'),
player = players[$card.index()];
if ($card.hasClass('card-movie--playing')) {
$(this).toggleClass('is-playing');
player.pauseVideo();
} else {
$(this).toggleClass('is-playing');
player.playVideo();
}
$card.toggleClass('card-movie--playing');
});
$('[data-navigation] li').on('click', function() {
// remove current stuff
players[current].pauseVideo();
$('.card-movie:eq(' + current + ')').removeClass('card-movie--playing card-movie--active');
$('[data-play]').removeClass('is-playing');
// assign new current
current = $(this).index();
$(this).addClass('is-active').siblings().removeClass('is-active');
$('.card-movie:eq(' + current + ')').addClass('card-movie--active');
});
});
