Background video cut off text

need solution for this.


Here is my site Read-Only: LINK
([how to share your site Read-Only link][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

thank you so much. :+1:

1 Like

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