.video-block {
    position: relative;
    border-radius: var(--radius);
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: var(--color-black);
}
.video-block__frame,
.video-block__cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-position: center center;
    object-fit: cover;
    border-radius: var(--radius);
    z-index: 1;
}
.video-block__cover {
    cursor: pointer;
}
.video-block__frame {
    z-index: 5;
}
.video-block_yt:before,
.video-block_rt:before {
    content: "";
    position: absolute;
    z-index: 2;
    cursor: pointer;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 48px;
    height: 48px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity var(--animate), visibility var(--animate);
    z-index: 2;
    pointer-events: none;
}
.video-block_yt:before {
    width: 68px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA2OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMV8yKSI+PHBhdGggZD0iTTY2LjUyIDcuNzRDNjUuNzQgNC44MSA2NC4wMyAyLjMzIDYxLjEgMS41NUM1NS43OSAwLjEzIDM0IDAgMzQgMEMzNCAwIDEyLjIxIDAuMTMgNi45IDEuNTVDMy45NyAyLjMzIDIuMjcgNC44MSAxLjQ4IDcuNzRDMC4wNjAwMDAxIDEzLjA1IDAgMjQgMCAyNEMwIDI0IDAuMDYwMDAwMSAzNC45NSAxLjQ4IDQwLjI2QzIuMjYgNDMuMTkgMy45NyA0NS42NyA2LjkgNDYuNDVDMTIuMjEgNDcuODcgMzQgNDggMzQgNDhDMzQgNDggNTUuNzkgNDcuODcgNjEuMSA0Ni40NUM2NC4wMyA0NS42NyA2NS43NCA0My4xOSA2Ni41MiA0MC4yNkM2Ny45NCAzNC45NSA2OCAyNCA2OCAyNEM2OCAyNCA2Ny45NCAxMy4wNSA2Ni41MiA3Ljc0WiIgZmlsbD0iI0ZGMDAwMCIvPjxwYXRoIGQ9Ik00NSAyNEwyNyAxNFYzNCIgZmlsbD0id2hpdGUiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF8xXzIiPjxyZWN0IHdpZHRoPSI2OCIgaGVpZ2h0PSI0OCIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=");
}
.video-block_rt:before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNDggOEM0OCAzLjU4MTcyIDQ0LjQxODMgMCA0MCAwSDI0SDhDMy41ODE3MiAwIDAgMy41ODE3MiAwIDhWNDBDMCA0NC40MTgzIDMuNTgxNzIgNDggOCA0OEgyNEg0MEM0NC40MTgzIDQ4IDQ4IDQ0LjQxODMgNDggNDBWOFoiIGZpbGw9IiMwMEExRTciLz48cGF0aCBkPSJNMzUgMjRMMTcgMTRWMzQiIGZpbGw9IndoaXRlIi8+PC9zdmc+");
}
.video-block_loaded .video-block__cover {
    display: none;
}
.video-block_loaded:before {
    opacity: 0;
    visibility: hidden;
}
.video-block_loaded:after {
    content: "";
    width: 58px;
    height: 58px;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transform-origin: 50%;
    border: 6px solid var(--color-white);
    border-radius: 50%;
    border-top-color: transparent;
    animation: preloaderSpin 1s infinite linear;
}
@keyframes preloaderSpin {
    0% {
        transform: translate(-50%,-50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}