How to remove border of a full-width looped video as Hero Section

Ask the community
1

Hi, I want to use the custom code feature to make a Hero section of my website. The video should be full width and playing automatically in loop.

But I notice there is a white border on the top and left side of my video. I’ve been fixed it for a while but do not have a working solution. Please help me out. Thank you!

Here is my code:

<style>
  .video-container {
    width: 100vw; /* Full width of the viewport */
    height: 1000px; /* You can adjust this as needed */
    overflow: hidden; /* Hide overflow to prevent scrollbars */
    position: relative; /* Establish positioning context */
  }

  .full-bleed-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire container */
    position: absolute; /* Position it absolutely within the container */
    top: 0;
    left: 0;
  }
</style>

<div class="video-container">
  <video autoplay loop muted playsinline class="full-bleed-video">
    <source src="https://assets.softr-files.com/applications/a86f5742-012c-4402-ab98-8b51947cdc67/assets/8a326b0f-46d7-4519-bf28-1ba1f7734282.mp4" type="video/mp4">
  </video>
</div>```