Video orientation is incorrect on FireFox

Question

I have html5 video tags of videos. On chrome all is good, on firefox the orientation of landscape videos is wrong...

Even tried using video.js, no change.

I read that this is a problem because the videos originated in iOS.

so 2 questions: 1. How can I still overcome this issue. Really there is no solution? 2. (out of curiosity) - how does chrome manage to overcome this?

Example of a URL (scroll down a bit in the chapters to see a vertical video):
http://www.letsfeedme.com/moments/55802f142f2dad3c008b4575-Balsamic-Vinegar-%22Caviar%22

Answer 1

I read that this is a problem because the videos originated in iOS.

All videos recorded using mobile devices will contain rotation metadata including those from iOS and Android devices. It can take 4 values: 0 (tilted left), 90 (portrait), 180 and 270:

On chrome all is good, on firefox the orientation of landscape videos is wrong...

Firefox and IE 10 are the only major browsers not supporting the rotation metadata. Here's Firefox compared with Chrome:

The latest version, Firefox 42 as of today, still does not support it. IE11 and Edge 12,13 do support it.

List of mobile/desktop players that support the rotation info: https://addpipe.com/blog/mp4-rotation-metadata-in-mobile-video-files/

How can I still overcome this issue. Really there is no solution?

See this answer for the solution, basically you need to :

1. rotate videos using FFmpeg (so Firefox and other browsers that do not support the rotation metadata show the video properly)
2. remove the rotation metadata (so that other players don't rotate the video since it's already been rotated by FFmepg)

Images courtesy of: https://addpipe.com/blog/mp4-rotation-metadata-in-mobile-video-files/