/* Relative Path: Resources/Public/Css/styles.css */

.rrzn-htmlvideo4all-parent {
    margin: 0 auto; /* Centers the block element if its parent has a defined width */
    width: 100%;    /* Takes the full width of its container */
    height: 0;      /* Height is determined by padding-bottom for aspect ratio */
    padding: 0;
    /*
       This creates a responsive aspect ratio box.
       For a 16:9 aspect ratio, (9 / 16) * 100% = 56.25%.
       The calculation `calc(1 / (16 / 9) * 100%)` is equivalent.
    */
    padding-bottom: 56.25%;
    position: relative; /* Establishes a positioning context for the absolute positioned video */
    overflow: hidden;   /* Ensures video doesn't spill out if aspect ratio isn't perfect */
}

.rrzn-htmlvideo4all-parent .video-js {
    margin: 0;
    position: absolute; /* Positioned relative to the .rrzn-htmlvideo4all-parent */
    top: 0;
    left: 0;
    width: 100%;        /* Fills the entire width of the parent */
    height: 100%;       /* Fills the entire height of the parent */
}