/**
 * Fichier  : /ott/player/css/style.css
 * Fonction : style du player HTML5
 */

/* ==================================================
   PLAYER
================================================== */

.video_player {
    position: relative;
    overflow: hidden;
}

.video_player {
    width: 100%;
}

.video_player {
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.30);
}


/* ==================================================
   VIDEO
================================================== */

.main-video {
    display: block;
}

.main-video {
    width: 100%;
    height: auto;
}

.main-video {
    background: #000;
}


/* ==================================================
   YOUTUBE
================================================== */

#youTube {
    position: relative;
}

#youTube {
    width: 100%;
    aspect-ratio: 16 / 9;
}

#youTube {
    background: #000;
}

.responsive-iframe {
    display: block;
}

.responsive-iframe {
    width: 100%;
    height: 100%;
}

.responsive-iframe {
    border: 0;
}


/* ==================================================
   FULLSCREEN
================================================== */

.video_player:fullscreen {
    width: 100vw;
    height: 100vh;
}

.video_player:fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
}

.video_player:fullscreen {
    background: #000;
    border-radius: 0;
}

.video_player:fullscreen .main-video {
    width: 100%;
    height: 100%;
}

.video_player:fullscreen .main-video {
    object-fit: cover;
}