Question 74554 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

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

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: 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

* {
    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)));
}
<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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Got a similar fix without using flexbox

    Just for the sake of completeness:

    * {
    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;
}
    <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>


  2. 0

    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).

    * {
  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)));
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search