Scale embedded video that respects to its apsect ratio using CSS

responsive-embed-video.scss

/**
 *  Usage:
 *  
 *  Set custom (percentage or absolute) width on .video-outer-wrapper
 *  
 *  ``html
 *    <div class="video-outer-wrapper">
 *      <div class="video-wrapper">
 *        <iframe ... ></iframe>
 *      </div>
 *    </div>
 *  ``
 *
 * Resource: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
 **/

.video-outer-wrapper {
    /* Set abosulte width here */
    max-width: 100%;

    .video-wrapper {
        position: relative;
        padding-top: 30px;
        padding-bottom: ((9 * 100) / 16) * 1%; /* aspect ratio 16:9 */
        width: 100%; /* this to be 100% */
        height: 0;
        
        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }
    }
}