1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Background Video - Position Adjustment?

Discussion in 'Free Divi Community Forum' started by A1 Media, Dec 31, 2021.

  1. A1 Media

    A1 Media New Member

    Hey guys, great site, been lurking and finding answers here for a long time.

    I can't seem to find a solution to this anywhere. I'm trying to change the position of certain background videos. Specifically, on some, I'd like them to be aligned to the bottom of the video so the top can crop, on others I need the opposite where the top is aligned and the bottom can crop as window size changes.

    Can anybody help a brother out?
     
    #1 A1 Media, Dec 31, 2021
    1. PRO MEMBER PERKS Divi Login Customizer Plugin - Instantly beautify your Wordpress login page with 6 premade designs:Learn More
  2. A1 Media

    A1 Media New Member

    To be clear: Essentially tring to add the same functionality you have with a background image, to a background video. With a background image there are options for "Background Image Position" - Bottom Center / Top Center / etc. With the background video, these options are not there.

    Really stuck on this, still can't find a solution anywhere.
     
    #2 A1 Media, Jan 1, 2022
  3. A1 Media

    A1 Media New Member

    Well, figured I'd answer my own post in case anybody else needs this and searches it out.

    Create new class and add to section. In this example "sec-bg" (add in Section Settings / Advanced / CSS ID & Classes / CSS Class box

    Then following to custom CSS of theme options.


    Code:
    Log In or Sign Up to view this code.
     
    #3 A1 Media, Jan 1, 2022
    Andreas G. and luthframe like this.
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  4. stakanovist

    stakanovist New Member

    Very useful ! Thanks
     
    #4 stakanovist, Jun 13, 2022
  5. Matt Dunn

    Matt Dunn New Member


    I'm trying to achieve something similar and wondered if you may be able to help?

    Long story short, I'm trying to use a full-width video section background. However, the height is currently set so it takes the full screen also. I essentially would like to keep the video full width [banner], but I would ideally like the video to be responsive and have a maximum video height of about 600px.

    The problem with when I restrict the height is that it cuts out the bottom of the video which contains most of the important shots. There's no Bottom Center / Top Center options available, so I'm hoping there's another way around this.

    Appreciate any help you can provide.
     
    #5 Matt Dunn, Aug 3, 2022
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Digital Marketing' Divi layout for all Pro members:View Demo
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
     
    #6 Divi.Help, Aug 5, 2022
  7. Matt Dunn

    Matt Dunn New Member

    Thank you for the response.
    I've uploaded some screenshots from the site.

    The video is full width which is perfect, whilst the height has also been set to 600px which is brilliant. However, since the max height of the video is set to 600px it essentially cuts out the video footage from the [doesn't display] bottom section of the video.

    Video Example 1
    I would rather the bottom section of the video displayed which showcases the warehouse rather than the sky.

    Video Example 2
    I would rather the bottom section of the video displayed which showcases the vehicle and company logo

    With a background image, I'm able to select image position and how it's displayed, such as 'top center' or 'bottom center'. However, there's no options to do this with a background video.

    Kind Regards, Matt.
     

    Attached Files:

    #7 Matt Dunn, Aug 11, 2022
    1. PRO MEMBER PERKS Divi Block Pro - Premade testimonial carousel design for your Divi site without using any plugins:View Demo
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL as well.
     
    #8 Divi.Help, Aug 23, 2022
  9. Jeff Moyer

    Jeff Moyer New Member

    This tutorial worked great thank you! I actually talked to Divi's main tech support on Elegant Themes in the past and they didn't have an answer for this. Much appreciated!
     
    #9 Jeff Moyer, Jun 5, 2023
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
  10. Philip German

    Philip German New Member



    Here's the best solution I've found so far.

    In the Divi section, which has the video background applied; add a video id of home-video (or whatever you want) in the Section Settings > Advanced > CSS ID & Classes > CSS ID

    Next, add the CSS below to your Divi themes CSS. Amend "left" to move the video across the device.

    /* Extra small devices (phones, 400px and down) */
    @Media only screen and (max-width: 400px) {

    #home-video{
    position: relative;
    }

    #home-video video{
    width: 100%!important;
    height: 100%!important;
    position: absolute!important;
    top: 0px!important;
    left: -500px!important;
    }

    }
     
    #10 Philip German, Dec 20, 2024
    Andreas G. likes this.
  11. PixelPerfectSites

    PixelPerfectSites New Member

    Thank you for sharing your solution! This helped me today, 3 years later.
     
    #11 PixelPerfectSites, Aug 29, 2025
    1. PRO MEMBER PERKS Divi Powerful Child Theme - Power up your Divi sites with tons of new functionalities & premade elements:Learn More
  12. Andreas G.

    Andreas G. Member
    Divi Ultimate Child Theme

    Same here! Thank you guys!
     
    #12 Andreas G., Oct 2, 2025
(You must log in or sign up to post here.)