<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 -->
$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
View Compiled
// 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');

    });

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js