Rotate HTML 5 video without also rotating controls?

Question

Using the CSS transform() property (and the -moz-, -webkit-, etc verisons), it's easy to rotate an HTML 5 video:

video {
   transform:rotate(90deg);
}

However, this rotates the controls along with the video. Is there any way to keep the video itself rotated without also rotating the controls?

Solution 1

Ok I see, you're using the native video controls. What you'll need to do is build custom controls if you want to style them separately. Here's a good tutorial on how to do that http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos. Hope this helps

Solution 2

Ok, For next rotate control. Add this in Css:

video::-webkit-media-controls {
 transform: scale(-1, 1);
    -webkit-transform:scale(-1, 1); /* Safari and Chrome */
    -moz-transform:scale(-1, 1); /* Firefox */
}
video::-webkit-media-controls-enclosure {
 transform: scale(-1, 1);
    -webkit-transform:scale(-1, 1); /* Safari and Chrome */
    -moz-transform:scale(-1, 1); /* Firefox */
}