/* 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%}
}