Video Background is not appearing Full width

Hi, Video background is not appearing full width when I zoom in or zoom out. When you start zooming it out less than 90%, you can see white padding across the video. I need to make it responsive for all devices so that it takes full width automatically across all devices. And also the video should have that same look (16:9) as appearing now not more than that. Below is the code snippet which is used for video background:

For desktop devices:

<div class="wrapper" style="width:115%; height:100%; margin-left: -105px;">
<video autoplay muted loop id="myVideo" style="object-fit: cover; max-width: 100%; height: 400px; margin-top: -50px;">
  <source src="https://latpay.com/wp-content/uploads/2023/08/AdobeStock_386036296_Video_HD_Preview.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
</div>

For mobile devices:

<div class="wrapper" style="width: 120%;
    margin-left: -9%;">
<video autoplay="" muted="" loop="" id="myVideo" style="object-fit: cover; margin-top: -50px;">
  <source src="https://latpay.com/wp-content/uploads/2023/08/AdobeStock_386036296_Video_HD_Preview.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
</div>

Can anybody please suggest me how to achieve this? I’m pretty sure the fix is easy but I’m missing out something.

The page I need help with: [log in to see the link]