.video-poster-player {
    position: relative;
}

.video-poster-player > video {
    display: block;
}

/* A one-column gallery should fill the content width even when its poster is narrower. */
.ce-gallery[data-ce-columns="1"]:has(.video-poster-player)
    :is(.ce-outer, .ce-inner, .ce-row, .ce-column, figure.video, .video-embed, .video-poster-player) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    float: none;
}

.video-poster-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, .75);
    cursor: pointer;
}

.video-poster-play[hidden] {
    display: none;
}

.video-poster-play > span {
    width: 0;
    height: 0;
    margin-left: 5px;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 17px solid #fff;
}

.video-poster-play:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}