Using 100% height / width after rotating an element using CSS

Question

I have an element (video) that I want to rotate, and then use 100% width and height. Before applying the rotation, the video takes up 100% of the width and height. After rotation, the size seems to be the same as before I rotated it. I would like to reapply 100% width and height to adapt the video to a new state.

The goal is to try to imagine the video in the landscape, even if the div (or phone) is in portrait orientation.

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

In the violin, click the button to view the video in the desired state.

The video is contained in a div container, which demonstrates that it is framed by something like a phone screen (red frame, I want to fill this video div).

Using JS, which starts after the button is pressed, I can achieve my goal, but I do it in an ugly ugly way - and I was wondering what a suitable / best way to achieve what I am doing.

This is CSS (it’s better to check the script link that I provided, I just put it here, because stackoverflow needs some code when there is a link to the violin):

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

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

Answer 1

, : , , , . . . ( , , )

$(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)"})
 });
});