html, body {
    height: 100%;
    margin: 0;
    background: #700785;


}

/* Youtube player */
.player {
    background-color: #000;
}

/* Container of both iframes */
.frames-container {
    margin: 0;
    display: grid;
    grid-gap: 0rem;
    height: 100%;


}

/* Default single-frame container attributes */
.frame-container {
    color: #ff0000;
    display: flex;
    display: -ms-flexbox;
    position: relative;
    min-width: 0;

}

.keypad {
    flex-grow: 1;

}

/* Landscape orientation */
@media (orientation: landscape) {
    .frames-container {
        grid-template-columns: repeat(2, 1fr);


    }

    .frame-container {
        flex-direction: column;

    }

    .player {
        width: 0vw;
        height: 0vh;
        align-items: center;
        justify-content: center;

    }

    .keypad {
        width: 100vw;

    }

    .video-container {
        position: relative;
        width: 100%;
        height: calc(9 * (100vw / 16));

    }
}

/* Protrait orientation */
@media (orientation: portrait) {
    .frames-container {
        grid-template-columns: repeat(1, 1fr);

    }

    .frame-container {
        flex-direction: row;

    }
    .player {
        height: calc(9 * (100vw / 16));

    }
}

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

.keypadframe {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}