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

        &-thumb {
            width: 100px;
            height: 75px;
            @media (max-width: @screen-xs-max) {
                width: 24px;
                height: 24px;
            }
        }

        @loading-transition: opacity .3s ease;

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

        &-thumb {
            @media (max-width: @screen-xs-max) {
                display: none;
            }
        }

        &-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;
            @media (max-width: @screen-xs-max) {
                font-size: 24px;
                color: @link-color;
                text-shadow: none;
            }
        }

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