Using Height/Width 100% After Rotating an Element with CSS

Question

I have an element (a video) that I want to rotate, and then use 100% width and height. Before applying the rotation, the video occupies 100% width and height. After the rotation, the size seems to remain the same as it was before I rotated it. I'd like to re-apply width and height 100% to adapt the video the the new state.

The goal is to try and present the video in landscape even though the div (or phone) is in portrait orientation mode.

Here's a JSFiddle of what I'm trying to do: http://jsfiddle.net/a1sLp5gn/2/

In the fiddle, click the button to see the video in the desired state.

The video is contained within a container div that demonstrates it being framed by something like a phone screen (the red border, I want to fill this div with the video).

Using the JS that runs after clicking the button, I am able to achieve my goal, but I am doing it in a hackish ugly way - and I was wondering what is the appropriate/best way to achieve what I am doing.

This is the CSS (better check out the fiddle link I provided, I'm only putting it here because stackoverflow requires some code when there's a fiddle link):

video {
      transform:rotate(90deg);
      height:100%;
      width:100%;
}

.container {
      border-style:solid;
      border-width:1px;
      border-color: red;
      height:640px;
      width:360px;
}

Answer 1

I hope this can help you: even you rotate an element, height, width, left and top properties are calculated on unrotaded element. You must consider container dimension and manually invert value. Normally rotation make element's center point as reference. (you can change with transorm-origin, but in this case is not necessary if video element is already centered)

$(function() {
 $('button').click(function() {

   var container = $("video").parent()

   $('video').height($(container).width());
   $('video').width($(container).height());

   $('video').css('position', 'absolute')
   var px = $(container).width() / 2
   var py = $(container).height() / 2
   $('video').css('left', px-py).css('top', py-px);
   //$("video").css({"transform":"rotate(90deg)"})
 });
});