marksumoto/index.html

## index.html
<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&nbsp;-&nbsp;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 -->

## script.js
// 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');

    });

});

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## style.scss
$color-white: #fff;
$color-black: #000;

$transition-time: 250ms;
$transition-method: ease-in-out;

$card-height: 440px;
$card-width: 840px;
$card-hover-offset-x: 40px;
$card-hover-offset-y: 60px;

html {
    box-sizing: border-box;
}
// html

body {
    color: #676767;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}
// body

*,
*:before,
*:after {
    box-sizing: inherit;
    line-height: inherit;
}
// *, *:before, *:after

%clearfix {

    &:after {
        clear: both;
        content: '';
        display: table;
    }
    // &:after

}
// %clearfix

.card-movie-wrapper {
    box-shadow: 0px 0px 100px 25px rgba($color-black, 0.2);
    height: $card-height;
    position: relative;
    width: $card-width;

    &:hover {

        .card-movie-carousel {
            -webkit-transition: all $transition-time $transition-method;
               -moz-transition: all $transition-time $transition-method;
                    transition: all $transition-time $transition-method;
            bottom: $card-hover-offset-y;
            right: $card-hover-offset-x;
        }
        // .card-movie-carousel

    }
    // &:hover

}
// .card-movie-wrapper

.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-wrapper--centered

.card-movie-carousel {
    -webkit-transition: all $transition-time $transition-method 250ms;
       -moz-transition: all $transition-time $transition-method 250ms;
            transition: all $transition-time $transition-method 250ms;
    height: $card-height;
    width: $card-width;
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: hidden;
}

.card-movie-navigation {
    background-color: $color-white;
    bottom: 0;
    height: 100%;
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 15;

    &__list {
        $item-size: 12px;
        $item-size-active: $item-size * 1.5;
        -webkit-transform: translateY(-50%);
           -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
             -o-transform: translateY(-50%);
                transform: translateY(-50%);
        position: absolute;
        right: ($card-hover-offset-x - $item-size) / 2;
        top: 50%;
        width: $item-size-active;

        li {
            -webkit-transition: all $transition-time $transition-method;
               -moz-transition: all $transition-time $transition-method;
                    transition: all $transition-time $transition-method;
            background-color: #ccc;
            border-radius: 100%;
            cursor: pointer;
            height: $item-size;
            margin: 0 auto $item-size/2;
            width: $item-size;

            &:last-child {
                margin-bottom: 0;
            }
            // &:last-child

            &.is-active {
                height: $item-size-active;
                width: $item-size-active;
            }
            // &.is-active

            &:hover {
                background-color: #bbb;
            }
            // &:hover

        }
        // li

    }
    // &__list

    button {
        $arrow-size: 6px;
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        background-color: transparent;
        border: none;
        bottom: 0;
        color: #aac8ca;
        cursor: pointer;
        font-size: 14px;
        line-height: $card-hover-offset-y;
        margin: 0;
        outline: none;
        padding: 0;
        position: absolute;
        right: $card-hover-offset-x;

        &:before {
            content: 'Watch Trailer';
        }
        // &:before

        &:after {
            -webkit-transform: translateY(-50%);
               -moz-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                 -o-transform: translateY(-50%);
                    transform: translateY(-50%);
            border-bottom: $arrow-size solid transparent;
            border-left: $arrow-size solid #dce9e9;
            border-top: $arrow-size solid transparent;
            content: '';
            height: 0;
            margin-right: $arrow-size;
            position: absolute;
            right: 100%;
            top: 50%;
            width: 0;
        }
        // &:after

        &.is-playing {

			&:before {
				content: 'Hide Trailer';
			}
			// &:before

            &:after {
                -webkit-transform: rotate(-90deg);
                   -moz-transform: rotate(-90deg);
                    -ms-transform: rotate(-90deg);
                     -o-transform: rotate(-90deg);
                        transform: rotate(-90deg);
                margin-top: -$arrow-size;
            }
            // &:after

        }
        // &.is-playing

    }
    // button

}
// .card-movie-navigation

.card-movie {
    -webkit-transition: all ($transition-time * 2) $transition-method;
       -moz-transition: all ($transition-time * 2) $transition-method;
            transition: all ($transition-time * 2) $transition-method;
    background-size: cover;
    bottom: 0;
    height: 100%;
    overflow: hidden;
    position: absolute;
    right: 0;
    opacity: 0;
    width: 100%;
    z-index: 20;

    &__content {
        left: 330px;
        position: absolute;
        top: 150px;
    }
    // &__content

    &__title {
        font-size: 60px;
        font-weight: 700;
        line-height: 1;
        margin-left: -4px;
        text-transform: uppercase;
    }
    // &__title

    &__details {
        @extend %clearfix;
        margin-bottom: 30px;
        margin-top: 15px;

        &-item {
            display: block;
            float: left;
            margin-right: 20px;
        }
        // &-item

        &-list {
            @extend %clearfix;

            li {
                float: left;
                margin-right: 5px;
                padding-right: 6px;
                position: relative;

                &:after {
                    content: '|';
                    position: absolute;
                    right: 0;
                }
                // &:after

                &:last-child {
                    margin-right: 0;

                    &:after {
                        display: none;
                    }
                    // &:after

                }
                // &:last-child

            }
            // li

        }
        // &-list

    }
    // &__details

    &__description {
        font-size: 14px;
        max-width: 390px;
    }
    // &__description

    &__rating {
        $size: 50px;
        bottom: $size/3;
        font-size: 18px;
        font-weight: 700;
        line-height: $size;
        position: absolute;
        right: $size/3;
        text-align: center;
        width: $size;

        &:after {
            border-radius: 100%;
            border: 2px solid #ee927b;
            content: '';
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }
        // &:after

    }
    // &__rating

    &__player {
       -webkit-transition: all ($transition-time * 2) $transition-method;
           -moz-transition: all ($transition-time * 2) $transition-method;
                transition: all ($transition-time * 2) $transition-method;
        -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 & {
            height: $card-height;
            width: $card-width;
        }
        // .card-movie--playing &

        iframe {
            height: 100%;
            width: 100%;
        }
        // iframe

    }
    // &__player

}
// .card-movie

.card-movie--active {
    opacity: 1;
    z-index: 25;
}
// .card-movie--active

.card-movie--light {
    background-color: #effdfd;

    [class*='__title'] {
        color: $color-black;
    }
    // [class*='__title']

}
// .card-movie--light

.card-movie--dark {
    background-color: $color-black;
    color: #fff;

    [class*='__title'] {
        color: #fff;
    }
    // [class*='__title']

}
// .card-movie--dark

.card-movie--looper {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/looper.png');
}
// .card-movie--looper

.card-movie--tron {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/tron.png');
}
// .card-movie--tron

.card-movie--interstellar {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/interstellar.png');
    background-color: #fffffa;
}
// .card-movie--interstellar

.card-movie--garden-state {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/garden-state.png');
}
// .card-movie--garden-state

.card-movie--walter-mitty {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/walter-mitty.png');
}
// .card-movie--walter-mitty

.card-movie--cloud-atlas {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/cloud-atlas.png');
}
// .card-movie--cloud-atlas

## week-2-movie-card-rv-code-challenge.markdown

      
    Raw
  

              week-2-movie-card-rv-code-challenge.markdown
            
          
    Week #2 :: Movie Card :: RV Code Challenge

A movie card.
My take on the 2nd week of the RV Code Challenge.
Dribbble:  https://dribbble.com/shots/2197748-Day-049-Movie-Card
More information about these challenges at http://codepen.io/team/RedVentures/post/weekly-code-challenge/
A Pen by Alex Fernandez on CodePen.
License.
	<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 -->
	// 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');

	});

	});
	$color-white: #fff;
	$color-black: #000;

	$transition-time: 250ms;
	$transition-method: ease-in-out;

	$card-height: 440px;
	$card-width: 840px;
	$card-hover-offset-x: 40px;
	$card-hover-offset-y: 60px;

	html {
	box-sizing: border-box;
	}
	// html

	body {
	color: #676767;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	}
	// body

	*,
	*:before,
	*:after {
	box-sizing: inherit;
	line-height: inherit;
	}
	// , :before, *:after

	%clearfix {

	&:after {
	clear: both;
	content: '';
	display: table;
	}
	// &:after

	}
	// %clearfix

	.card-movie-wrapper {
	box-shadow: 0px 0px 100px 25px rgba($color-black, 0.2);
	height: $card-height;
	position: relative;
	width: $card-width;

	&:hover {

	.card-movie-carousel {
	-webkit-transition: all $transition-time $transition-method;
	-moz-transition: all $transition-time $transition-method;
	transition: all $transition-time $transition-method;
	bottom: $card-hover-offset-y;
	right: $card-hover-offset-x;
	}
	// .card-movie-carousel

	}
	// &:hover

	}
	// .card-movie-wrapper

	.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-wrapper--centered

	.card-movie-carousel {
	-webkit-transition: all $transition-time $transition-method 250ms;
	-moz-transition: all $transition-time $transition-method 250ms;
	transition: all $transition-time $transition-method 250ms;
	height: $card-height;
	width: $card-width;
	position: absolute;
	bottom: 0;
	right: 0;
	overflow: hidden;
	}

	.card-movie-navigation {
	background-color: $color-white;
	bottom: 0;
	height: 100%;
	overflow: hidden;
	position: absolute;
	right: 0;
	width: 100%;
	z-index: 15;

	&__list {
	$item-size: 12px;
	$item-size-active: $item-size * 1.5;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	position: absolute;
	right: ($card-hover-offset-x - $item-size) / 2;
	top: 50%;
	width: $item-size-active;

	li {
	-webkit-transition: all $transition-time $transition-method;
	-moz-transition: all $transition-time $transition-method;
	transition: all $transition-time $transition-method;
	background-color: #ccc;
	border-radius: 100%;
	cursor: pointer;
	height: $item-size;
	margin: 0 auto $item-size/2;
	width: $item-size;

	&:last-child {
	margin-bottom: 0;
	}
	// &:last-child

	&.is-active {
	height: $item-size-active;
	width: $item-size-active;
	}
	// &.is-active

	&:hover {
	background-color: #bbb;
	}
	// &:hover

	}
	// li

	}
	// &__list

	button {
	$arrow-size: 6px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: transparent;
	border: none;
	bottom: 0;
	color: #aac8ca;
	cursor: pointer;
	font-size: 14px;
	line-height: $card-hover-offset-y;
	margin: 0;
	outline: none;
	padding: 0;
	position: absolute;
	right: $card-hover-offset-x;

	&:before {
	content: 'Watch Trailer';
	}
	// &:before

	&:after {
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	border-bottom: $arrow-size solid transparent;
	border-left: $arrow-size solid #dce9e9;
	border-top: $arrow-size solid transparent;
	content: '';
	height: 0;
	margin-right: $arrow-size;
	position: absolute;
	right: 100%;
	top: 50%;
	width: 0;
	}
	// &:after

	&.is-playing {

	&:before {
	content: 'Hide Trailer';
	}
	// &:before

	&:after {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	margin-top: -$arrow-size;
	}
	// &:after

	}
	// &.is-playing

	}
	// button

	}
	// .card-movie-navigation

	.card-movie {
	-webkit-transition: all ($transition-time * 2) $transition-method;
	-moz-transition: all ($transition-time * 2) $transition-method;
	transition: all ($transition-time * 2) $transition-method;
	background-size: cover;
	bottom: 0;
	height: 100%;
	overflow: hidden;
	position: absolute;
	right: 0;
	opacity: 0;
	width: 100%;
	z-index: 20;

	&__content {
	left: 330px;
	position: absolute;
	top: 150px;
	}
	// &__content

	&__title {
	font-size: 60px;
	font-weight: 700;
	line-height: 1;
	margin-left: -4px;
	text-transform: uppercase;
	}
	// &__title

	&__details {
	@extend %clearfix;
	margin-bottom: 30px;
	margin-top: 15px;

	&-item {
	display: block;
	float: left;
	margin-right: 20px;
	}
	// &-item

	&-list {
	@extend %clearfix;

	li {
	float: left;
	margin-right: 5px;
	padding-right: 6px;
	position: relative;

	&:after {
	content: '\|';
	position: absolute;
	right: 0;
	}
	// &:after

	&:last-child {
	margin-right: 0;

	&:after {
	display: none;
	}
	// &:after

	}
	// &:last-child

	}
	// li

	}
	// &-list

	}
	// &__details

	&__description {
	font-size: 14px;
	max-width: 390px;
	}
	// &__description

	&__rating {
	$size: 50px;
	bottom: $size/3;
	font-size: 18px;
	font-weight: 700;
	line-height: $size;
	position: absolute;
	right: $size/3;
	text-align: center;
	width: $size;

	&:after {
	border-radius: 100%;
	border: 2px solid #ee927b;
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	}
	// &:after

	}
	// &__rating

	&__player {
	-webkit-transition: all ($transition-time * 2) $transition-method;
	-moz-transition: all ($transition-time * 2) $transition-method;
	transition: all ($transition-time * 2) $transition-method;
	-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 & {
	height: $card-height;
	width: $card-width;
	}
	// .card-movie--playing &

	iframe {
	height: 100%;
	width: 100%;
	}
	// iframe

	}
	// &__player

	}
	// .card-movie

	.card-movie--active {
	opacity: 1;
	z-index: 25;
	}
	// .card-movie--active

	.card-movie--light {
	background-color: #effdfd;

	[class*='__title'] {
	color: $color-black;
	}
	// [class*='__title']

	}
	// .card-movie--light

	.card-movie--dark {
	background-color: $color-black;
	color: #fff;

	[class*='__title'] {
	color: #fff;
	}
	// [class*='__title']

	}
	// .card-movie--dark

	.card-movie--looper {
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/looper.png');
	}
	// .card-movie--looper

	.card-movie--tron {
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/tron.png');
	}
	// .card-movie--tron

	.card-movie--interstellar {
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/interstellar.png');
	background-color: #fffffa;
	}
	// .card-movie--interstellar

	.card-movie--garden-state {
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/garden-state.png');
	}
	// .card-movie--garden-state

	.card-movie--walter-mitty {
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/walter-mitty.png');
	}
	// .card-movie--walter-mitty

	.card-movie--cloud-atlas {
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/cloud-atlas.png');
	}
	// .card-movie--cloud-atlas