Video on Front Page Hero cropped on all sides

  • chloebaggins

    (@chloebaggins)


    6 years ago

    Please note that my site is not yet active so you won’t see a sample of my issue by going there.
    I am using the current WP version and Mesmerize theme.

    I am using a video on the Front Page Hero. The problem I am having is that not all video content is visible. The video is a dynamic chart (https://youtu.be/Inz5yzfc6po) so the words on the bottom of the bars, indeed all the visible info in the video, is important for comprehension. I have adjusted the Content Spacing, and it looks fine in Preview, but as soon as I Publish, it reverts to masking crucial content.

    Are there any modifications I can make so that this video scales to the appropriate size of screen? It isn’t scaling right now so when I switch from tablet to phone view, in addition to the words not appearing, only one bar appears. The ideal situation would have all words and parts of the video (the bars) scale so that all items appear on all screens, only smaller.

    I found discussions where people had similar issues with images, but I did not find a solution that worked for me.

    A part of the screen that shows the words visible along the bottoms of the bars: https://www.dropbox.com/s/6e2ikcshvcdum7t/BottomLineProb.png?dl=0. Once I publish it, the words disappear: https://www.dropbox.com/s/b8rnrgps6zwp5bb/BottomLineProb3.png?dl=0. I purchased CSS Hero so I can see the code to better understand what’s going on, but this doesn’t help a non-code expert: https://www.dropbox.com/s/h1923pj91ouxe06/BottomLineProb4.png?dl=0. Even the title is affected: https://www.dropbox.com/s/rcmcsa21lp50ft8/TabletView.png?dl=0

    I welcome your ideas! Thank you!

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Ionut Tudose

    (@ionuttudose)

    Hello,

    Unfortunately, if your website is not online I can not see your issue so I can further help you.

    Please, let me know when your website will be online so I can try to help you.

    Thread Starter chloebaggins

    (@chloebaggins)

    Hi,
    I put a lot of description and screen grabs in my query for that very reason … so you’d have a visual of the issue. I won’t put my site online while it has such problems, given first impressions and all that. Can you please just look at the screen grabs?

    Ionut Tudose

    (@ionuttudose)

    Hello,

    Use this extra CSS code in Customizer -> General Settings -> Additional CSS :

    div#wp-custom-header.cp-video-bg #wp-custom-header-video{
width:100% !important;
height:100% !important;
object-fit: fill !important;
position:unset !important;

    Please, let me know if it worked for you, @chloebaggins

    Thread Starter chloebaggins

    (@chloebaggins)

    Thank you so much Ionut!

    The code immediately affected the change I desired (See https://www.dropbox.com/s/92ev7apxjvbn6ly/NewCodeMakesItSkinny.png?dl=0), although oddly, each time I make some other change, it reverts to the original “too big/off the screen” size (See https://www.dropbox.com/s/cm4wzlmqm195g38/Reverts.png?dl=0) but also now the font style at the top of the screen (Kat Williams) reverts to its original format. There’s now also overlap at the top of the screen with the Menu (See https://www.dropbox.com/s/hvidzxuxhdevft4/Overlaps.png?dl=0). I will look into whether or how I can move that tomorrow.

    I suspect there’s some code running in the background that overwrites my additional CSS. Is there some way I can get the changes made with Additional CSS to stay put?

    Also, maybe this is coder logic, but I had some other code in the Additional CSS and that didn’t seem to work when it came BEFORE what you sent, only when I put it after.

    div#wp-custom-header.cp-video-bg #wp-custom-header-video{
    width:100% !important;
    height:100% !important;
    object-fit: fill !important;
    position:unset !important;}

    .col-xs a
    {font-style:normal;
    text-transform:none!important;
    font-weight:300;
    }

    h1,h2,h3,h4,h5{
    text-transform:capitalize!important;
    }

    Thread Starter chloebaggins

    (@chloebaggins)

    Oh, it actually looks like there’s no overlapping of the Menu and the Site Title at the top of the page now.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Video on Front Page Hero cropped on all sides’ is closed to new replies.