cbrawl cbrawl - 9 months ago 112
HTML Question

Why is an HTML video tag displaying the video upside down only in Mozilla Firefox?

I have a page that displays multiple videos using html video tags. The code looks like the below snippet:

<video controls="controls" class="vw" name="Video" src="videos/ACS_Video_2b.mp4"></video>

The class is simply a class that dynamically sets the width, height, etc.

The video looks and plays very nicely in all browsers except for Firefox. All of the videos on the website using these tags are upside down in Firefox. I can't seem to find anything online about people having similar problems. In fact, when I go to other websites using identical video tags and video extensions, etc., the video displays perfectly on their site for me in Firefox.

Here is the website with the upside down videos for reference:


The videos display upside down locally, on a local server, and hosted on a real server.

Any help would be greatly appreciated.

Answer Source

This is a firefox problem, have seen several people have complained over and over again but all to no avail. it only happens when the video is recorded from mobile, firefox doesn't seem to use to encoded rotation that came along with the mobile video. for the main time you have to figure out a fix for yourself, you can use css transform to rotate the video tag, but one problem with that is that it will rotate the video control with it.

you can use videojs, then add the rotate plugin, you can just google it. it will help rotate for video.

you can do something like this

 if ( isfirefox ) {

    <video  class="video-js vjs-default-skin" controls preload="auto" width="270" height="360" data-setup='{ "plugins": { "zoomoomrotate": { "rotate": "270", "zoom": "1.4" } } }'>
        <source src="video-source" type="video/mp4">         


also, there is a recent issue in chrome update that compress mobile video as well. still looking for a fix for it