.pgui-field {
  &-options {
    display: block;
    margin: 8px 0
  }

  &-embedded-video {
    display: inline-block;
    position: relative;
    opacity: 1;
    cursor: pointer;

    &-thumb {
      width: 100px;
      height: 75px;
    }

    @loading-transition: opacity .3s ease;

    &-preloader {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: @loading-transition;
    }

    &-icon, &-thumb {
      opacity: 1;
      transition: @loading-transition;
    }
    &-fade {
      opacity: 0;
      transition: @loading-transition;
    }

    &-icon {
      font-size: 40px;
      color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-shadow: 0 0 5px #000;
    }

    &-iframe {
      width: 100%;
      height: 100%;
      min-height: 320px;
    }
  }

}

@media (max-width: @screen-xs-max) {
  .pg-row {
    .pgui-field-embedded-video {
      &-thumb {
        display: none;
        width: 24px;
        height: 24px;
      }

      &-icon {
        font-size: 24px;
        color: @link-color;
        text-shadow: none;
      }
    }
  }
}