Home>Support>.mp4 video non-responsive in Firefox

.mp4 video non-responsive in Firefox

By Chris Robbins, 9 years ago. Last reply by Andrew Misplon, 9 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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    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. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    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. 9 years, 6 months ago Chris Robbins

    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. 9 years, 6 months ago Chris Robbins

    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. 9 years, 6 months ago Chris Robbins

    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. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More