Video Background is not appearing Full width

  • Resolved pgdev

    (@pgdev)


    1 year, 2 months ago

    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]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Please go to Appearance->Customize->Additional CSS option and then add that code

    #av_section_2 .container{
   max-width: 100%;
}

    If not work then remove the code and add this one please

    #av_section_2 .container{
   max-width: 100% !important;
}
    Thread Starter pgdev

    (@pgdev)

    Not working, tried both the codes. Still same ??

    I gave a new id ‘videobg’ and applied above snippet too still not working.

    • This reply was modified 1 year, 2 months ago by pgdev.

    Please implement that exact code

    #videobg .container{
    max-width: 100%;
}

    If not work then add this one please

    #videobg .container{
    max-width: 100% !important;
}
    Thread Starter pgdev

    (@pgdev)

    Solved. Thanks!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Video Background is not appearing Full width’ is closed to new replies.