Additional CSS for Header Video

  • DLSieving

    (@dlsieving)


    4 months, 3 weeks ago

    When used in the Escapade theme under Customize > Additional CSS, this code is meant to control the size of the header section containing a video but does nothing, nor does it trigger any error messages, helpful or otherwise.

    @media screen and (min-width: 64em) {

      .hero .site-header .has-header-video .custom-header-media {

        padding-top: 0; !important;

        padding-bottom: 0; !important;

        padding-left: 0; !important;

        padding-right: 0; !important;

        width: background; !important;

        height: auto; !important;

      }

    }

    I’m beginning to suspect that adjusting the dimensions of the video is the ONLY way to do this, then just let WordPress work with whatever video it is given.

    Ideally I’d like to make the video a background video for the entire home page:

    Elementor plugin: Apparently this only works when you create a new page or post using an Elementor template, or when you create a new website from scratch using Elementor. Not very helpful when you just want to add a background video to the home page of an existing site without adapting everything else on the site to an entirely new framework. Elementor is known for its many clickbait entries, all of which lead to the Upgrade option, with no complete guidance on how to work with an existing site. They want to hook you and reel you in as a lifetime source of income who’s totally dependent on them.

    Advanced WordPress Backgrounds (AWB) with Gutenberg block editor plugins: These two plugins purportedly work together to create background videos. To the uninitiated, they seem dead for this purpose, without effect and unaware of one another. I’ve followed the documentation and found no reason to reconsider this view.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter DLSieving

    (@dlsieving)

    4 months, 3 weeks ago

    UPDATE: I resized the video using Canva to eliminate the blacked-out margins left by other resizing tools such as iMovie. After adjusting the dimensions manually from 1600 by 1280 to 1350 by 1080, Canva changes them back to 1608 × 1286 (without the blacked-out margins) without asking in an attempt to match the original, resulting in a lower-quality video due to loss of resolution but with the same dimensions as the original. Thus, the resolution in WordPress is lower but the layout is no different using the “smaller” video as it is using the larger-format original video (1600 x 1280) because CANVA dutifully removed the blacked out margins but DIDN’T CHANGE THE VIDEO DIMENSIONS. Apparently the ONLY way to make the header video match the page layout is to WIDEN the layout of the body of the page. What is Canva trying to foist on me?

    Theme Author Guido

    (@guido07111975)

    4 months, 2 weeks ago

    Hi,

    I don’t understand why you are posting at the support page of the MultiColors theme, as the site you mention is using another theme, called Escapade.

    Guido

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

You must be logged in to reply to this topic.