Fullscreen video kept in viewport

With this technique you can implement a "fullscreen" video which will always keep it's intended ratio.

by Simon Harte

HTML

<div class="video-container">
    <iframe class="video" src="https://www.youtube.com/embed/XQu8TTBmGhA" frameborder="0" allowfullscreen></iframe>
</div>

SCSS

html, body {
    margin: 0;
}

.video-container {
    position: fixed;
    /* ratio 16/9 */
    width: 100vh / 9 * 16;
    height: 100vw / 16 * 9;
    /* always keep in viewport */
    max-height: 100vh;
    max-width: 100vw;
    /* center container */
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}