food/scripts/lib/frames.css

body {
    overflow: hidden;
}
#content {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    display: grid;
    grid-template-columns: 20px 1fr 512px 512px 20px;
    grid-template-rows: 80px 1fr 288px 20px;
}
#scansdiv {
    grid-column: 1 / span 5;
    grid-row: 1 / span 4;
    z-index: 1;
}
#titlesdiv {
    grid-column: 3;
    grid-row: 3;
    z-index: 2;
    /*background: white;*/
    box-sizing: border-box;
    /*display: none;*/
}
#titlesdiv.hidden {
    /*display: none;*/
    z-index: 0;
}
#videodiv {
    grid-column: 4;
    grid-row: 3;
    z-index: 2;
    box-sizing: border-box;
    position: relative;
}
#textcontroldiv {
    grid-column: 4;
    grid-row: 4;
    position: relative;
    z-index: 3;
}
#textcontroldiv img {
    position: absolute;
    width: 40px;
    height: 40px;
    left: -54px;
    top: -40px;
    cursor: pointer;
}
@media (orientation: portrait) {
    #content {
        grid-template-columns: 20px 1fr 512px 20px;
        grid-template-rows: 80px 1fr 288px 288px 20px;
    }
    #scansdiv {
        grid-column: 1 / span 4;
        grid-row: 1 / span 5;
        z-index: 1;
    }
    #titlesdiv {
        grid-column: 3;
        grid-row: 3;
    }
    #videodiv {
        grid-column: 3;
        grid-row: 4;
    }
}

#videodiv video {}
.fill {
    width: 100%;
    height: 100%;
    border: none;
}