html,
body{
    margin:0;
    padding:0;
    background:#000;
    width:100%;
    height:100%;
}

.dsypsy-player-wrapper{

    width:100%;
    max-width:1200px;

    margin:0 auto;

}

.dsypsy-player{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    background:#000;

    overflow:hidden;

}

/* BOTH PLAYERS */

#moviePlayer,
#adPlayer{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

}

/* Movie visible by default */

#moviePlayer{

    z-index:10;

}

/* Ad hidden until needed */

#adPlayer{

    z-index:20;

    display:none;

}

/* Advertisement Label */

.dsypsy-ad-label{

    position:absolute;

    top:15px;

    left:15px;

    background:rgba(0,0,0,.8);

    color:#fff;

    padding:6px 10px;

    border-radius:4px;

    font-size:14px;

    font-weight:bold;

    z-index:9999;

}

/* Skip Button */

.dsypsy-skip{

    position:absolute;

    right:20px;

    bottom:20px;

    background:rgba(0,0,0,.85);

    color:#fff;

    padding:10px 16px;

    border:1px solid #fff;

    border-radius:4px;

    cursor:pointer;

    z-index:9999;

    font-size:14px;

    user-select:none;

}

.dsypsy-skip:hover{

    background:#111;

}


/*==================================================
VIDEO.JS RESPONSIVE RESPONSIVENESS & MOBILE VERTICAL PRESERVATION
==================================================*/

/* Ensure the Video.js player shell resizes to exactly fill the player container */
.video-js {
    width: 100% !important;
    height: 100% !important;
}

/* 
 * Force both horizontal and vertical videos to scale inside the 16:9 container dynamically.
 * This adds black bars on the left/right of vertical mobile videos instead of cropping them.
 */
.video-js .vjs-tech,
.video-js video {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}