HTML 5 code to rotate videos on web pages

Michael McKenney

I take videos of my children from my S9 phone. When I put them on my Ubuntu web server, they are rotated 90 degrees. I have Sony Vegas Movie Studio and can run it and rotate them. How can I write HTML 5 code to do it?

Justin Dennison66

Hey Michael,
I just want to make sure that you are looking at these through a browser when you observe the orientation issues and not in other applications. If you are using a browser, could you provide the browser version and type? Additionally, could you try other browsers? A great deal of the time that I have seen this is because there is EXIF metadata that is not being utilized by whatever application you are using. If that is the case, then fixing that will require CSS and/or JavaScript to fix.

Justin Dennison

Michael McKenney

IE11 would do it. Firefox hasn't yet. could be the older browser.

Justin Dennison66

Michael,
Since there is inconsistent rotation among browsers, getting consistent rotation is going to require JavaScript more than likely. You can try the following:

img {
   -webkit-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   transform: rotate(-90deg);
}

but that may rotate the image in browsers that should not be rotated. (You can change the degrees to adjust the direction.)