.wml-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.wml-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: transparent;
    transition: all var(--wml-transition, 0.4s) ease;
}

.wml-video-container iframe,
.wml-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain;
    /* Use CSS variables for real-time builder updates */
    filter: grayscale(var(--wml-grayscale, 0%)) blur(var(--wml-blur, 0px)) brightness(var(--wml-brightness, 100%));
    transition: all var(--wml-transition, 0.4s) ease-in-out;
    pointer-events: var(--wml-pointer-events, none);
}

.wml-video-container:hover iframe,
.wml-video-container:hover video {
    transform: scale(var(--wml-hover-zoom, 1));
}