@include pageflow-page-type(embedded_video);

.embedded_video_page {
  .page_text {
    margin-top: 40px;
  }

  .widescreened .page_text {
    margin-top: 0;
  }

  .iframe_overlay {
    .has_mobile_platform & {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;

      &:before {
        position: absolute;
        top: 0;
        width: 101%;
        height: 101%;
        content: "";
        background-color: black;
        opacity: 0.5;
      }

      &:after {
        font-family: 'FontAwesome';
        color: white;
        font-size: 70px;
        position: absolute;
        display: block;
        width: 100%;
        text-align: center;
        top: 50%;
        margin-top: -35px;
      }

      &.youtube:after {
        content: "\f167";
      }

      &.vimeo:after {
        content: "\f194";
      }

      pointer-events: all;
      height: initial;
      padding-top: 56.25%;
      position: relative;

      @include phone {
        height: auto;
        padding-top: 62.5%;
      }

      iframe {
        position: absolute;
        top: 0;
        left: 0;
      }

      &.active {
        iframe {
          visibility: visible;
          opacity: 1;
        }
      }
    }
  }

  .iframe_wrapper {
    pointer-events: all;
    height: initial;
    padding-top: 56.25%;
    position: relative;

    iframe {
      position: absolute;
      top: 0;
      left: 0;
    }

    &.widescreened {
      position: absolute;
      width: 45%;
      max-height: 600px;
      @include position-end(10%);
      margin-top: 0;
      top: 50%;
      @include transform(translate(0,-50%));
      margin-bottom: 0;
      z-index: 1;
      padding-top: 25.2%;
    }

    &:before {
      padding: 10px;
      background-color: #191919;
      background-color: rgba(25,25,25, 0.9);
      box-shadow: rgba(0,0,0,0.5) 0 0 3px 0px;
      content: "";
      position: absolute;
      top: -10px;
      left: -10px;
      width: 100%;
      z-index: -1;
      height: 100%;
    }

    .text_position_right &.widescreened {
      @include position-end(auto);
      @include position-start(8%);
      width: 42%;
    }

    .bigScreen & {
      position: absolute;
      width: 86% !important;
      height: 87%;
      top: 10%;
      left: 5% !important;
      z-index: 201;
      margin-top: 0 !important;
      max-height: none !important;
    }

    &.active {
      iframe {
        visibility: visible;
        opacity: 1;
      }
    }
  }

  .close_button {
    display: none;

    .has_mobile_platform &.show {
      display: block;
    }
  }

  .iframe_container {
    .has_mobile_platform & {
      pointer-events: none;
      height: 0;
      padding-top: 0;
      position: relative;
      overflow: hidden;
      opacity: 0;
      @include transition(opacity 0.5s);
      z-index: 1;

      &:before {
        content: "";
        display: block;
        top: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.9;
      }

      &.show {
        width: 100%;
        height: 100%;
        pointer-events: all;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 1;
      }

      .iframe_wrapper {
        @include transform(translate(0, -50%));
        width: initial;
        top: 50%;
        margin-right: 85px;

        @media screen and (orientation: landscape) {
          top: 60px;
          padding-top: 0;
          bottom: 60px;
          position: absolute;
          left: 0;
          right: 0;
          margin-bottom: 0;
          @include transform(none);
        }

        @include mobile {
          margin-right: 0;
        }

        &:before {
          content: initial;
        }
      }
    }
  }

  .video_caption {
    color: white;
    margin-top: 20px;
    z-index: 0;
    position: relative;
    display: block;
    margin-bottom: 40px;

    &:before {
      content: "";
      display: block;
      position: absolute;
      padding: 10px;
      background-color: black;
      background-color: rgba(0,0,0,0.9);
      top: -10px;
      left: -10px;
      width: 100%;
      z-index: -1;
      height: 100%;
    }

    .inverted & {
      color: black;
      background-color: white;
    }

    .has_mobile_platform & {
      padding: 15px;
      margin-top: 0;

      &:before {
        display: none;
      }
    }
  }

  .widescreened .video_caption {
    position: absolute;
    top: 100%;
    width: 100%;
    margin-bottom: 0;
  }
}