Front Page Hero Video Cutting off on Mobile

  • Hi everyone,

    Any help or advice on how I can fix my intro front page header video so that it displays without cutting off on a mobile display? The video looks fine on my laptop and on larger screens, but it is seriously cut off once I get down to the small screen of my cell phone. I’d really like to figure out how to size the container (if that’s what I need to do) so that the video just gets smaller for the phone, rather than cutting off. Can anyone help?

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

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

  • Change the video’s css object-fit property from cover to contain, use mobile query

    for example: 

    /* Mobile media query */
@media only screen and (max-width: 600px) {
  video {
    object-fit: contain;
  }
}
    Thread Starter mcnamal

    (@mcnamal)

    Thank you, Liz! Can you give me one more pointer? I’ve only ever used WP Snippet for adding code and I’m not sure where or how to change the video’s css object-fit. I see the Otter block has a place for custom CSS but I’m not sure if I should put it there.

    I don’t know Otter Block, but if something is possible there with custom CSS, you can insert it there. If it doesn’t work, remove it again.

    With classic themes, you can insert such individual CSS code under Appeareance > Customizer > Additional CSS.
    With modern block themes (FSE), you can go to Appeareance > Editor > Styles > Edit and then click on the bottom 3 dots on the top right-hand side – there is “Additional CSS” where you can also insert the code.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Front Page Hero Video Cutting off on Mobile’ is closed to new replies.