Background video cut off text

Design help General
1

need solution for this.

https://www.loom.com/share/6b1e37a47d7a492c92cd523d4830602d

Here is my site Read-Only: LINK
([how to share your site Read-Only link][2])

2

Hi Chathus,

You would have to retain the video’s ratio so you don’t lose the video contents like you’ve shown here. I mean, it’s apparent that the video’s orientation is landscape (as anyone would normally expect), so this would be obvious that if the height didn’t scale down with the viewport width, that video content would be cut off. Which is exactly what you’re seeing.

What you can do is take advantage of the aspect-ratio CSS property.

<style>
  .vid-ratio {
    aspect-ratio: 16 / 9;
  }
</style>

You can copy that code and add it to an embed element and place the embed element at the top of your layers in the navigator, right underneath the <body>.

In this code you can see the class you can use is vid-ratio.

  1. Copy this vid-ratio class to your clipboard
  2. Locate the video and remove any height value you have on it
  3. Set the width to 100%
  4. Paste the vid-ratio class in the Selector input

From here you should notice that the video retains its proper ratio all the way down. If you need to make adjustments for mobile you can copy the code below and add it under the other code you added.

<style>
@media screen and (max-width: 540px) {
  .vid-ratio {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
}
</style>

This will allow you to change the aspect-ratio or width for screens 540px in width and below.

I hope this helps in some way. If you have any other questions, please let me know.
All the best,

– Noah

3

thank you so much. :+1:

1 Like
4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.