Video Shortcode Set to Static 40px Height

  • I am using the Bridge theme, and everything is up to date. The video is not live on the site, but it could be if need be (I just wanna avoid having something problematic on my live site).

    Anyway, I’m trying to insert a video into a post, but the height of the video is set to 40px no matter what the window size is, although the width is perfectly responsize. Here’s my video shortcode:

    [video width="1280" height="720" mp4="https://direct2dealers.com/wp-content/uploads/2015/03/D2D_Final_NoFade.mp4" poster="https://direct2dealers.com/wp-content/uploads/2015/05/lamborg-blk.jpg" preload="auto"][/video]

    There is a pesky line of CSS that causes the video to be 40px tall no matter what, located in a file called “stylesheet.min.css?ver=4.2.2”:

    .mejs-container { height: 40px!important; }

    So, I went in and added my own CSS, as shown below:

    .wp-video > .mejs-container { height: 596px!important; }

    Which solves the problem for the most part, except when the window is resized to a smaller size, the inner video image is responsive, but the box it is inside of remains at 596px height (as defined by me). I could just create multiple lines of CSS to set the height dynamically depending on the window width, but I don’t think that should be necessary.

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

  • I think the 40px was intended for audio files. Is this a commercial theme, if so can the vendor’s support service help.

    Did you try:

    .wp-video > .mejs-container { height: auto!important; }

    I can’t try it myself as its not live.

    Thread Starter brian_denton

    (@brian_denton)

    Setting the height to auto causes the box to be 0px tall.
    Here is a live version of it:

    https://direct2dealers.com/test-page/

    Hi, the video tag contains conflicting information for the element height:

    <video ... height="596" ... style=" ... height: 100%;">

    and its the 100% which is taking precedence because it comes later. Its not helpful because we want the 596 to apply. I think the 100% is taken to mean 100% of the containing div, not 100% of the size the video tag requires. Are you able to remove that style from the tag? (leaving the 596 in) There is probably more work to do but I think that would be a good start.

    Thread Starter brian_denton

    (@brian_denton)

    Yes, the height (both 100% and 596px) is generated outside of my control, within the WordPress and/or theme core files.
    The 596px appears to be generated dynamically, in the sense that it is rendered based on the size of the window any time it is resized, so it must be a Javascript file (you can see the original height and width of the element change as the window is resized).
    The fact that the element has two conflicting heights is for sure an oversight by WP or my theme, as it is given two different attributes in some PHP and/or JS file at some time as it parses the shortcode (the JS gives it a dynamic height as the window is resized, but another file gives it a static height of 40px).
    Like I said, it is out of my control, unless I set the height to a static number using CSS (like I did with “height: 596px!important”) or create my own plugin that overrides whatever sets the height of the element. Or go into the WP core files and change the way the video shortcode is rendered, which is bad practice.
    Thank you so much for your help thus far.

    Try this in your custom css:

    .wp-video {height:596px !important}
video {height:596px !important}

    If your theme does not have a setting where you can enter custom css, you can use a plugin like this one:
    https://www.ads-software.com/plugins/simple-custom-css/
    Custom css is loaded last so takes precedence.

    Should the controls be at the bottom?

    Thread Starter brian_denton

    (@brian_denton)

    That is what I have presently.
    The only issue with setting a static height (596px) is that it is not responsive, so it looks really bad on mobile and smaller screens. The 596px is generated based on screen size, so on mobile it should be something like 179px and on smaller screens it should be 305px or whatever. It’s the 40px that is overriding the default responsive height of the elements.
    I emailed my theme a while ago, so I am sure when they decide to get back to me they will have an answer.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Video Shortcode Set to Static 40px Height’ is closed to new replies.