.video-component {
  width: 100%;
  margin: 40px 0;
  height: 200px;
}

.video-component .video-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.video-component .video-play-icon {
  content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20637.9%20707.4%22%3E%3Cpath%20fill%3D%22%233764f0%22%20d%3D%22M284.8%200l353.1%20353-354.4%20354.3-39.3.1L245.5%200z%22%2F%3E%3C%2Fsvg%3E);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 80px;
  opacity: 0.9;
  cursor: pointer;
}


/* lightbox */
.video-lightbox--overlay {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
  z-index: 999;
  display: none;
  overflow-y: scroll;
}

.video-lightbox--overlay .video--options {
  display: flex;
  margin: 0 -20px;
}

.video-lightbox--overlay .video--close {
  content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20210%20210%22%3E%3Cpath%20d%3D%22M160%20105l49.5%2049.5v11l-44%2044h-11L105%20160l-49.5%2049.5h-11l-44-44v-11L50%20105%20.6%2055.5v-11l44-44h11L105%2050%20154.5.5h11l44%2044v11L160%20105z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
  width: 60px;
  height: 100%;
  padding: 20px;
  z-index: 200;
}

.video-lightbox--overlay .video-lightbox--window {
  position: relative;
  padding: 0 20px;
  width: 100%;
  height: 100%;
}

.video-lightbox--overlay.open {
  display: block;
}

.video-lightbox--overlay .video-lightbox--iframe {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-lightbox--overlay iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-lightbox--overlay .video--description {
  display: block;
  color: #fff;
  font-size: 14px;
  width: 100%;
  background-color: #3764f0;
  padding: 20px;
  top: 0;
}

@media only screen and (min-width: 375px) 
and (max-width : 812px) 
and (orientation : landscape) {
  .video-lightbox--overlay .video-lightbox--window {
    padding: 0 80px;
  }

  .video-lightbox--overlay .video--options {
    margin: 0 -80px;
  }

  .video-lightbox--overlay .video-lightbox--iframe {
    top: auto;
    left: auto;
    transform: none;
    margin-top: 20px;
  }
}

@media only screen and (min-width: 1025px) {
  .video-lightbox--overlay .video-lightbox--window {
    padding: 0 20px;
  }

  .video-lightbox--overlay .video--options {
    margin: 0 -20px;
    align-items: center;
  }

  .video-lightbox--overlay .video-lightbox--iframe {
    max-width: 1250px;
    max-height: 720px;
    padding: 0;
    height: 100vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .video-lightbox--overlay .video--close {
    cursor: pointer;
  }

  .video-lightbox--overlay .video--description {
    font-size: 18px;
    padding: 30px;
  }
}