IE9+ not playing portrait video in HTML5 video tag

Question

For some reason I can't get IE9/10 to play video that is taller than wide, when using HTML5 video tags.

Demo: http://s.l6.no/demo/video+html5/

The demo shows one video scaled down from 1280x720, which plays perfectly fine in all tested browsers, and one video scaled down from 720x1280 which plays for all browsers but IE9/10.

Tested and works for:

• Chrome 26, Windows 7 64-bit
• Chromium 24, Ubuntu 64-bit
• Firefox 14, Windows 7 64-bit

Tested and does not work for:

• Internet Explorer 9, Windows 7 64-bit
• Internet Explorer 10, Windows 7 64-bit

I'm using FFmpeg to code the videos to MP4(x264) and WebM(VP8), with the current command dummed down to this:

ffmpeg -i in.mp4 -vcodec libx264 -pix_fmt yuv420p -y -b:v 4000k out.mp4

The lack of profile settings would be my first point, but since the other video is playing just fine, I can't see why it should matter.

Any ideas?

Edit: soft rotating the video isn't really an option, as the user is to be able to download the video to play offline. I could transcode an extra version just for IE, but come on, there's gotta be another way, no?

Answer 1

The problem is the video height. It has to be less than 1088 pixels. More here

Answer 2

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 as well.