Align single flexbox item (video) at bottom left within SVG container

I’ve got an SVG container that sits in a vertical/horizontal center with a predefined aspect ratio (i.e., 1.77). (This was coming from here.

I need to place a video element at a fixed position inside the SVG canvas. Prior I was using foreignObject, which was working great in all browsers except Safari (see here: https://stackoverflow.com/questions/61895287/wrong-position-of-video-element-inside-svg-foreignobject-on-safari).

No I am back to trying to get my head around flexbox, and how to position the video at the bottom left corner (where the other rectangle is).

What magic CSS will do the trick?

Of course, the video should be scale similar to the bottom left box when the users resized the browser.

Codepen: https://codepen.io/Kalaschnik/pen/OJBVOKL

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
	overflow: hidden;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

video {
	position: absolute;
	height: 100px;
	/* How to place video at the bottom left of the SVG */
	/* left: ??? */
	/* bottom: ??? */
}

svg {
	--aspectRatio: 1.7777777;
	width: min(100vw, (100vh * var(--aspectRatio)));
	height: min(100vh, (100vw / var(--aspectRatio)));
}

<!-- language: lang-html -->

<video autoplay loop muted playsinline>
	<source src="https://ccp-odc.eva.mpg.de/matt/output-hevc-safari.mp4" type='video/mp4; codecs="hvc1"'>
	<source src="https://ccp-odc.eva.mpg.de/matt/output-vp9-chrome.webm" type="video/webm">
</video>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
  <rect fill="#00A99D" width="1920" height="1080" />
	<rect y="780" fill="#208096"  width="200" height="300" />
	<rect x="860" y="390" fill="#208096" width="200" height="300" />
</svg>

<!-- end snippet -->

If you wrap the video and the SVG in a <div> and set the width and height on the <div> instead of the SVG you can just position the video absolute, bottom left corner. The SVG will take up the entire space as long as it is the same aspect ratio. The <div> needs to be positioned relative, but that makes no difference to the flex to the outer element (the body).

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

video {
  position: absolute;
  height: 100px;
  left: 0;
  bottom: 0;
}

div {
  position: relative;
  --aspectRatio: 1.7777777;
  width: min(100vw, (100vh * var(--aspectRatio)));
  height: min(100vh, (100vw / var(--aspectRatio)));
}

<!-- language: lang-html -->

<div>
  <video autoplay loop muted playsinline>
    <source src="https://ccp-odc.eva.mpg.de/matt/output-hevc-safari.mp4" type='video/mp4; codecs="hvc1"'/>
    <source src="https://ccp-odc.eva.mpg.de/matt/output-vp9-chrome.webm" type="video/webm"/>
  </video>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
    <rect fill="#00A99D" width="1920" height="1080" />
    <rect y="780" fill="#208096"  width="200" height="300" />
    <rect x="860" y="390" fill="#208096" width="200" height="300" />
  </svg>
</div>

<!-- end snippet -->

Got a similar fix without using flexbox

Just for the sake of completeness:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
	overflow: hidden;
}

.container {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

svg {
	--aspectRatio: 1.7777777;
	width: min(100vw, (100vh * var(--aspectRatio)));
	height: min(100vh, (100vw / var(--aspectRatio)));
}

video {
	position: absolute;
	height: 30%;
    left: 0;
	bottom: 0;
}

<!-- language: lang-html -->

<div class="container">
  <video autoplay loop muted playsinline>
    <source src="https://ccp-odc.eva.mpg.de/matt/output-hevc-safari.mp4" type='video/mp4; codecs="hvc1"'/>
    <source src="https://ccp-odc.eva.mpg.de/matt/output-vp9-chrome.webm" type="video/webm"/>
  </video>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
    <rect fill="#00A99D" width="1920" height="1080" />
    <rect y="780" fill="#208096"  width="200" height="300" />
    <rect x="860" y="390" fill="#208096" width="200" height="300" />
  </svg>
</div>

<!-- end snippet -->