1. HOT Be a Pro member & access all our premium Divi extensions, including the popular Divi Block - Pro Version & many more.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites.
View All Pro Layout Packs
BEST Divi Block - An online drag & drop tool to easily mix & match 456+ premade blocks (light / dark version), including custom header, fullscreen / slide in mobile menu, mega menu, custom footer, page design blocks, before / after image slider, promo bar, floating button, logo carousel, content toggle, slide in bar, etc.
Learn MoreTry Free Version

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. AD Divi Ecommerce is a premium child theme designed to sell products online with Divi and WooCommerce: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.
     
  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:
    .sec-bg .et_pb_section_video_bg .mejs-video {
        bottom: 0px;
    }
     
    1. AD With 40+ Divi premium modules and extensions to choose from. Take Divi to the next level:Learn More
  4. stakanovist

    stakanovist New Member

    Very useful ! Thanks
     
  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.
     
    1. AD Easily display and style events from The Events Calendar with custom Divi modules:Learn More
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
     
  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:

    1. AD Free Divi floating button + contact form layout:Learn More