<div class="movie">

  <div class="prime"></div>
  <div class="front">
    <img src="https://raw.githubusercontent.com/patelvinay/Featured-Movies-Card/master/img/movie-cover.jpg" alt="" class="cover">
  </div>

  <div class="back">
    <div class="trailer" id="player">
    </div>

    <div class="title">
      <h3>Black Panther</h3>
      <span></span>

      <i class="fas fa-play ic-play"></i>
      <i class="fas fa-plus ic-plus"></i>
    </div>

    <div class="description">
      <p>When young King T'Challa is Drawn into conflit with an old foe that puts his homeland wakanda and the entire world at risk, he msut release Black Panther's full power to save them.</p>
    </div>

    <div class="time">
      <p>2h 3min <span>2020</span></p>
      <i class="far fa-comment-alt"></i>

    </div>

  </div>

  <div class="background"></div>
</div>

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --clr-dark: rgb(27, 37, 46);
  --br: 0.5em;
}

body {
  font-family: sans-serif;
  place-items: center;
  display: grid;
  background-color: var(--clr-dark);
  color: #fff;
  min-height: 100vh;
}

h1, h2, h3, p {
  margin: 0;
}

img {
  max-width: 100%;
}

.movie {
  position: relative;
  width: 25em;
  cursor: pointer;
}

/********************** Front *******************************/
.front .cover {
  border-radius: var(--br);
}

/********************** Back *******************************/
.back {
  opacity: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.back .trailer {
  box-shadow: 0px 20px 15px #000;
  transform: translateY(-33%);
  width: 100%;
  height: 210px;
  border-top-left-radius: var(--br);
  border-top-right-radius: var(--br);
}

.back .title {
  transform: translateY(-45px);
  display: flex;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.back .title h3 {
  color: #79b8f3;
}

.back .title span {
  padding-left: 10em;
}

.back .title .ic-play {
  padding-right: 1.5em;
}

.back .description {
  transform: translateY(-30px);
  display: flex;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.back .time {
  display: flex;
  color: #8197a4;
  transform: translateY(-10px);
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.back .time span {
  margin-left: 1em;
}

.back .time i {
  margin-left: 1em;
}

.background {
  background: var(--clr-dark);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  transform: scale(0.2, 0.9);
  opacity: 0;
  border-radius: var(--br);
}

/********************** On Hover *******************************/
.movie:hover .front {
  opacity: 0;
}

.movie:hover .back {
  opacity: 1;
}

.movie:hover .background {
  transition: transform ease-in-out, opacity 100ms linear;
  opacity: 1;
  transform: scale(1, 1.8) translateY(5%);
  box-shadow: 0px 0px 15px #000;
}

var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        videoId: 'xjDjIWPwcPU'

      });
    }
    
    $(document).on('mouseover', '#player', function() {
      player.playVideo();
    });
    $(document).on('mouseout', '#player', function() {
      player.pauseVideo();
    });