This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

.mp4 video non-responsive in Firefox

Resolved 6 replies premiumthemetheme-vantage
Chris Robbins
10 years ago · Last reply by Andrew Misplon 10 years ago

Is this a known issue with Vantage or is there something that I can do to fix the problem? I’ve been uploading my .mp4 videos for several months and didn’t notice the non-responsive nature until today. It works just fine in Safari, Chrome, and on my mobile devices. However, in Firefox (latest FF version 36.0.1), the sidebar becomes hidden below the video if I shrink the browser.

I’ve included a test page that has an .mp4 running on it, to see if you can replicate the issue in FF.

Thanks
Chris

URL: http://www.iweathernet.com/blog/test6

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. Andrew Misplon Staff 10 years, 11 months ago

    Hi Chris

    Thanks for including a test page with the problem, that’s helpful.

    I’m not sure what the problem is yet. There are fixed width’s stated in the WP video player but those change as you re-size in Chrome. That functionality isn’t working in Firefox. Let me get a consult with the guys tomorrow and come back to you when I have something.

  2. Andrew Misplon Staff 10 years, 11 months ago

    Braam and myself did some testing here. It looks as this this is a persistent bug in the WordPress core. Both Vantage and Twenty Fifteen themes show this problem in Firefox. So…options moving forward:

    Perhaps try managing that page in Page Builder, use the Embedded Video (PB) widget and see if that helps at all?
    Display that page as full width. If it’s posts we’re talking about you could then use Jetpack Widget Visibility to exclude widgets from that post, forcing it into full width.

    Can’t think of much else right now…

  3. Chris Robbins 10 years, 10 months ago

    Andrew,

    I know it has been a while since I opened this ticket, but I found a solution to make my .mp4 responsive across all browsers (that I’ve tested) and mobile. As you recall from my original post, my videos weren’t responsive in Firefox, and you were able to replicate on your end. The following was my solution:

    Custom CSS:

    video {
  width: 100%    !important;
  height: auto   !important;
}

    And in the html, instead of embedding the video as [/code]

    So rather than use the standard “embed” result with brackets, I just used <video src= and it works just fine. No width or height is to be specified in the html.

    Also, the CSS had no impact on the default embed code with brackets as in [video mp4= blah….

    I hope this helps anyone else who has the same problems that I experienced.

  4. Chris Robbins 10 years, 10 months ago

    CORRECTION…. I am reposting my reply above because the

    for the html did not appear as expected.  
Andrew,
I know it has been a while since I opened this ticket, but I found a solution to make my .mp4 responsive across all browsers (that I’ve tested) and mobile. As you recall from my original post, my videos weren’t responsive in Firefox, and you were able to replicate on your end. The following was my solution:
Custom CSS:
[code]  video {
  width: 100%    !important;
  height: auto   !important;
}

    And in the HTML, instead of embedding the video as

    [video mp4= blah…]

    as would be produced by embedding a media file, I used the following:

    <video src="http:// link to video file .mp4" loop="true" autoplay="true"></video>

    So rather than use the standard “embed” result with brackets, I just used <video src= and it works just fine. No width or height is to be specified in the html.

    Also, the CSS had no impact on the default embed code with brackets as in [video mp4= blah…. I had to use <video src ….

    I hope this helps anyone else who has the same problems that I experienced.

    -Chris

  5. Chris Robbins 10 years, 10 months ago

    Ugh… I am going to try this one more time. For some reason, the post isn’t appearing as desired, despite proper use of the code tags….

    Final CORRECTION to the post:

    I know it has been a while since I opened this ticket, but I found a solution to make my .mp4 responsive across all browsers (that I’ve tested) and mobile. As you recall from my original post, my videos weren’t responsive in Firefox, and you were able to replicate on your end. The following was my solution:

    Custom CSS:

    video {
  width: 100%    !important;
  height: auto   !important;
}

    And in the HTML, instead of embedding the video as

    [video mp4= blah…]

    as would be produced by embedding a media file, I used the following:

    <video src="http:// link to video file .mp4" loop="true" autoplay="true"></video>

    So rather than use the standard “embed” result with brackets, I just used <video src= and it works just fine. No width or height is to be specified in the html.

    Also, the CSS had no impact on the default embed code with brackets as in [video mp4= blah…. I had to use <video src ….

    I hope this helps anyone else who has the same problems that I experienced.

    -Chris

  6. Andrew Misplon Staff 10 years, 10 months ago

    Hey Chris :)

    Thanks for sharing your progress and solution. Sounds like a win!

    All the best.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread