Chrome HTML5 Video Flipping Portrait Sideways

Question

I\'m building a site to display video recorded from an iPhone. The video comes in portrait orientation, at 288x352. Safari displays this video just fine, but in Chrome, the

Answer 1

It's a bit ugly, but you could add -webkit-transform:rotate(90deg); to the style attribute of the video tag. However, this rotates your controls aswell.

I just streamed the video from AWS through VLC Player, and the video appears to be rotated 90 degrees anti-clockwise. Apple uses a metadata flag to indicate rotation instead of simply recording video in a different orientation. Unfortunately, many players/browsers will ignore this flag, including VLC and Chrome.

To fix the problem, you need to rotate the actual video file. You can do this by opening it in VLC Player, go to Tools > Effects and Filters. Click on Video Effects then Geometry. Enable Transform and select Rotate by 90 degrees from the dropdown menu. Click OK then just close VLC. The video should now be ready, although I can't test it on your page.

You may now need to remove the rotation metadata tag so that Safari will not rotate the video further. Again, I haven't tested this yet.