added video background

src/components/Header.js

@@ -2,33 +2,33 @@ import React from 'react'
 
 import PlayLogo from '../static/images/play-button.svg'
 import AddLogo from '../static/images/add.svg'
+import ReactPlayer from 'react-player'
 
 const Header = ({ movie: { backdrop_path, name, overview } }) => {
-  const backgroundStyle = {
-    backgroundSize: 'cover',
-    backgroundImage: `url(https://image.tmdb.org/t/p/original/${backdrop_path})`,
-    backgroundPosition: 'center',
-  }
-
   return (
-    <header style={backgroundStyle} className='header'>
-      <div className='header__container'>
-        <h1 className='header__container-heading'>{name}</h1>
-        <button
-          onClick={() => alert('not a movie!')}
-          className='header__container-btnPlay'
-        >
-          <PlayLogo className='header__container-btnMyList-play' />
-          Play
-        </button>
-
-        <button className='header__container-btnMyList'>
-          <AddLogo className='header__container-btnMyList-add' />
-          My List
-        </button>
-        <p className='header__container-overview'>{overview}</p>
-      </div>
-      <div className='header--fadeBottom'></div>
+    <header className='header'>
+      <ReactPlayer
+        playing={true}
+        loop={true}
+        width='100%'
+        height='100%'
+        className='header__video'
+        url='https://vimeo.com/384025132'
+      />
+      <h1 className='header__container-heading'>{name}</h1>
+      <button
+        onClick={() => alert('not a movie!')}
+        className='header__container-btnPlay'
+      >
+        <PlayLogo className='header__container-btnMyList-play' />
+        Play
+      </button>
+      <button className='header__container-btnMyList'>
+        <AddLogo className='header__container-btnMyList-add' />
+        My List
+      </button>
+      <p className='header__container-overview'>{overview}</p>
+      <div className='header__container--fadeBottom'></div>
     </header>
   )
 }

src/static/sass/base/_base.scss

@@ -141,7 +141,7 @@ html {
 
 // GRID AREA
 .container {
-  display: grid;
-  grid-template-rows: min-content min-content min-content min-content;
-  grid-template-columns: 0 repeat(10, 1fr);
+  // display: grid;
+  // grid-template-rows: min-content min-content min-content min-content;
+  // grid-template-columns: 0 repeat(10, 1fr);
 }

src/static/sass/layout/_header.scss

@@ -1,16 +1,22 @@
 .header {
   background-color: $color-background;
-  grid-column: 1 / 13;
-  height: 82vh;
-  display: grid;
+  // grid-column: 1 / 13;
+  // height: 82vh;
+  // display: grid;
+  position: relative;
+  padding-top: 56.25%;
 
   @include responsive(phone) {
     height: 58rem;
   }
 
+  &__video {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
   &__container {
-    padding-top: 20rem;
-    padding-left: 4.5rem;
     color: #fff;
 
     @include responsive(phone) {
@@ -19,23 +25,27 @@
 
     &-heading {
       font-size: 6rem;
-      padding-bottom: 1rem;
+      position: absolute;
+      color: #fff;
+      top: 12rem;
+      left: 3.5rem;
     }
 
     &-btnPlay,
     &-btnMyList {
+      top: 40rem;
       cursor: pointer;
       font-size: 1.6rem;
       color: #fff;
       outline: none;
       border: none;
       font-weight: 700;
-      border-radius: 0.2vw;
+      border-radius: 5px;
       padding-left: 3.5rem;
       padding-right: 3.5rem;
       margin-right: 1rem;
       padding-top: 1rem;
-      background-color: rgba(51, 51, 51, 0.5);
+      background-color: rgba(112, 111, 111, 0.5);
       padding-bottom: 1rem;
 
       &-add {
@@ -51,40 +61,59 @@
         fill: #fff;
         margin-right: 1rem;
       }
+    }
+
+    &-btnPlay {
+      color: #000;
+      background-color: #e6e6e6;
+      transition: all 0.2s;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+
+      & > * {
+        fill: #000;
+      }
+      left: 4rem;
+      position: absolute;
+    }
+
+    &-btnMyList {
+      left: 18.5rem;
+      position: absolute;
 
       &:hover {
-        color: #000;
-        background-color: #e6e6e6;
-        transition: all 0.2s;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-
-        & > * {
-          fill: #000;
-        }
+        background-color: rgb(37, 37, 37);
       }
     }
 
     &-overview {
-      width: 45rem;
+      top: 28rem;
+      left: 4rem;
+      position: absolute;
+      color: #fff;
+      width: 55rem;
       line-height: 1.3;
       padding-top: 2.5rem;
       font-size: 1.8rem;
     }
-  }
 
-  &--fadeBottom {
-    align-self: end;
-    height: 28.5rem;
-    background-image: linear-gradient(
-      180deg,
-      transparent,
-      rgba(15, 15, 15, 0.61),
-      rgb(17, 17, 17),
-      rgb(17, 17, 17)
-    );
+    &--fadeBottom {
+      z-index: 100000000000;
+      position: absolute;
+      bottom: 0;
+      height: 10rem;
+      width: 100%;
 
-    @include responsive(phone) {
-      height: 4rem;
+      background-image: linear-gradient(
+        180deg,
+        transparent,
+        rgba(15, 15, 15, 0.61),
+        rgb(17, 17, 17),
+        rgb(17, 17, 17)
+      );
+
+      @include responsive(phone) {
+        height: 4rem;
+      }
     }
   }
 }