﻿.video-dialog {
    width: min(960px, calc(70vw - 40px));
    padding: 0;
    overflow: visible;
    background: #000;
    border: 0;
    border-radius: 4px;
}

    .video-dialog::backdrop {
        background: rgb(0 0 0 / 85%);
        backdrop-filter: blur(8px);
    }

    .video-dialog video-player {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

.video-dialog__close {
    position: absolute;
    z-index: 10;
    top: 18px;
    right: 18px;
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 3px;
    place-items: center;
}

    .video-dialog__close:hover {
        color: #fff;
    }

.video-dialog video-player,
.video-dialog video-minimal-skin,
.video-dialog youtube-video {
    display: block;
    width: 100%;
    height: 100%;
}

.video-dialog video-player {
    aspect-ratio: 16 / 9;
}


.youtube-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    border-radius: 3px;
    --media-accent-color: #d63535;
    --media-border-radius: 3px;
    --media-scale-unit: 0.85;
}

    .youtube-player video-skin,
    .youtube-player youtube-video {
        width: 100%;
        height: 100%;
    }

.media-minimal-skin {
    --container-border-radius: 4px;
}