body { margin: 0; overflow: hidden; background: black; color: white; } @font-face { font-family: 'Phili'; /*a name to be used later*/ src: url('./PhiliItaRus.woff'); /*URL to font*/ } #content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: row; } #left { flex: 1 1 auto; display: flex; flex-direction: column; } #video { background: gray; overflow: hidden; flex: 10 1 auto; /*width: 480px;*/ /*height: 270px;*/ /* https://css-tricks.com/aspect-ratio-boxes/ */ /* height + padding-top = 16:9 */ /*height: 0;*/ /*padding-top: 56.25%;*/ /* flex: 1 1 auto; */ position: relative; } #video .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } video { width: 100%; height: 100%; } #blabla { font-family: 'Phili'; /*width: 480px;*/ flex: 1 1 auto; min-height: auto; padding: 0px 50px; } #changeText{ font-size: 20px; } #pad { flex: 1 1 auto; min-width: 40%; } #pad iframe { width: 100%; height: 100%; } .video-js{ width: 100% !important; height: 100% !important; }