Video & wrapper that never gets bigger than the viewport?

dabblet.css

/**
 * Video & wrapper that never gets bigger than the viewport?
 * (Does not work right now. It resizes correctly for available width, but not available height)
 */

.media-frame {
	border: 10px solid red;
	width: fit-content;
	max-width: 100%;
	max-height: -webkit-fill-available;
}

.media-frame video {
	max-width: 100%;
	max-height: -webkit-fill-available;
	background: yellow;
}

dabblet.html

<div class="media-frame"><video src="https://mavo.io/demos/eshop/video.mp4" class="paused"></video></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}