/* De Werven Videoportaal - publieke spelers */
.dwv-youtube-player{
    --dwv-player-max:760px;
    position:relative;
    width:min(100%, var(--dwv-player-max));
    aspect-ratio:16 / 9;
    margin:1.5rem auto;
    overflow:hidden;
    background:#000;
}
.dwv-youtube-player.dwv-orientation-portrait{aspect-ratio:9 / 16}
.dwv-youtube-player.dwv-orientation-square{aspect-ratio:1 / 1}

/* Per invoeging kan de redacteur een maat kiezen. Liggende en staande films
   krijgen bewust verschillende maxima zodat een 9:16-film nooit kolossaal wordt. */
.dwv-youtube-player.dwv-orientation-landscape.dwv-video-size-small{--dwv-player-max:560px}
.dwv-youtube-player.dwv-orientation-landscape.dwv-video-size-medium{--dwv-player-max:760px}
.dwv-youtube-player.dwv-orientation-landscape.dwv-video-size-large{--dwv-player-max:960px}
.dwv-youtube-player.dwv-orientation-landscape.dwv-video-size-full{--dwv-player-max:100%}

.dwv-youtube-player.dwv-orientation-portrait.dwv-video-size-small{--dwv-player-max:280px}
.dwv-youtube-player.dwv-orientation-portrait.dwv-video-size-medium{--dwv-player-max:360px}
.dwv-youtube-player.dwv-orientation-portrait.dwv-video-size-large{--dwv-player-max:460px}
.dwv-youtube-player.dwv-orientation-portrait.dwv-video-size-full{--dwv-player-max:560px}

.dwv-youtube-player.dwv-orientation-square.dwv-video-size-small{--dwv-player-max:320px}
.dwv-youtube-player.dwv-orientation-square.dwv-video-size-medium{--dwv-player-max:420px}
.dwv-youtube-player.dwv-orientation-square.dwv-video-size-large{--dwv-player-max:520px}
.dwv-youtube-player.dwv-orientation-square.dwv-video-size-full{--dwv-player-max:680px}

.dwv-youtube-player iframe{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    border:0 !important;
    aspect-ratio:inherit !important;
}

/* Compatibiliteit met oEmbed/thema-wrappers rond verticale films. */
.dwv-youtube-player > .wp-block-embed__wrapper,
.dwv-youtube-player > .fluid-width-video-wrapper,
.dwv-youtube-player > .fusion-video,
.dwv-youtube-player > .fusion-video-sc,
.dwv-youtube-player > div{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
    aspect-ratio:inherit !important;
}

@media (max-width:600px){
    .dwv-youtube-player{width:100%;max-width:100%}
}

/* v0.1.17: lokale thumbnail als poster totdat de bezoeker afspeelt. */
.dwv-youtube-player.dwv-has-poster{background:#111}
.dwv-video-poster{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    background:#111;
    cursor:pointer;
    overflow:hidden;
    color:#fff;
    font:inherit;
}
.dwv-video-poster img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.dwv-video-poster-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,rgba(0,0,0,.05),rgba(0,0,0,.05) 55%,rgba(0,0,0,.55));
}
.dwv-video-play{
    position:absolute;
    left:50%;
    top:50%;
    width:72px;
    height:50px;
    transform:translate(-50%,-50%);
    border-radius:14px;
    background:#f00;
    box-shadow:0 2px 12px rgba(0,0,0,.28);
}
.dwv-video-play::after{
    content:'';
    position:absolute;
    left:29px;
    top:13px;
    border-left:20px solid #fff;
    border-top:12px solid transparent;
    border-bottom:12px solid transparent;
}
.dwv-video-poster-label{
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    max-width:calc(100% - 32px);
    padding:7px 12px;
    border-radius:999px;
    background:rgba(0,0,0,.72);
    color:#fff;
    font-size:14px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dwv-video-poster:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.dwv-video-noscript{position:absolute;left:12px;bottom:12px;background:#fff;padding:6px 10px}
@media (max-width:600px){
    .dwv-video-play{width:64px;height:44px;border-radius:12px}
    .dwv-video-play::after{left:26px;top:11px;border-left-width:18px;border-top-width:11px;border-bottom-width:11px}
    .dwv-video-poster-label{font-size:12px;bottom:12px}
}