Background Video Cut Off On Sides

  • Resolved jimbwayne98

    (@jimbwayne98)


    4 years, 5 months ago

    Hello! I’m having a little trouble getting my entire background video to display in the hero area, without getting cut off. Currently the left and right sides appear to be cropped by about 50px.

    Here is the original video. As you can see, there is more of the glass displayed in the source file than what is showing up on the site.

    https://drive.google.com/file/d/16KbnyVX8biJgC9Tj6GhYHAZgzzSys-i-/view?usp=sharing

    I actually don’t care about the left side, just the right side, where we’d like more of the glass to appear. So if it means stealing from the left side to give more visibility to the right side, that is a fine solution.

    I’ve tried all kinds of CSS tweaks but remain stumped. Any help would be much appreciated!

    Thanks.

    • This topic was modified 4 years, 5 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

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

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

  • Hmmm.
    Just FYI, that Safari (iPads, etc) won’t display videos set to background any longer. The rest of the browsers are listed as limited support.

    Did you try :
    background-size: cover;

    There’s also a jQuery snippet specifically for this, and it uses object-fit :
    https://github.com/BGStock/jquery-background-video

    I’m not convinced your 3700×1900 is an optimal fit. Did you try more like 2000×1000 ?

    Did you try :

    .eut-bg-video {
position: fixed;
top: 50%;
left: 50%;
display: flex;
}
    Thread Starter jimbwayne98

    (@jimbwayne98)

    That last chunk did it! Could have sworn I tried something like that, must have been targeting the wrong class. Thank you @corrinarusso!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Background Video Cut Off On Sides’ is closed to new replies.