react-video/lib/react-video.styl

React component to load video from Vimeo or Youtube across any device

// ----------------------------------------------------------------------------
//
//  React Video
//
// ----------------------------------------------------------------------------

$full-width {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video {
  position: relative;
  padding-bottom: 56.25%;
  background: #E2E2E2;

  iframe {
    border: 0;
  }
}

// ----------------------------------------------------------------------------
//  Video Image
// ----------------------------------------------------------------------------

.video-image {
  @extends $full-width;
  background-position: center center;
  background-size: 100% auto;

  &:after {
    @extends $full-width;
    z-index: 1;
    display: block;
    content: '';
    background: rgba(black, .3);
  }
}

// ----------------------------------------------------------------------------
//  Play Button
// ----------------------------------------------------------------------------

$to-center {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.video-play-button {
  @extends $to-center;
  z-index: 2;
  position: absolute;
  padding: 0;
  width: 70px;
  border: 0;
  background: none;

  &:focus {
    outline: none;
  }

  svg {
    fill: white;
    -webkit-filter: drop-shadow(0 1px 1px rgba(black, .8));
            filter: drop-shadow(0 1px 1px rgba(black, .8));
  }
}

// ----------------------------------------------------------------------------
//  Loading Spinner
// ----------------------------------------------------------------------------

.video-loading {
  @extends $to-center;
  z-index: 4;
  position: absolute;
  width: 32px;
  height: 32px;

  svg {
    fill: black;
    transform-origin: 50% 50%;
    -webkit-animation: spinner .8s infinite linear;
            animation: spinner .8s infinite linear;
  }
}

@keyframes spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// ----------------------------------------------------------------------------
//  Video Embed
// ----------------------------------------------------------------------------

.video-embed {
  @extends $full-width;

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