Resizing jwplayer7 iframe when orientation changes - css

Question

I'm having an issue with JWP7, when the player is loading on portrait or landscape mode it stretches out to the full window as expected, but when changing the device orientation while the player is still playing, the player doesn't scaling the the new window dimensions.
Code example:
$('.player').height($window.height());
jwplayer("myElement").setup({
file: "somevideo.mp4",
width: windows.width,
height: windows.height,
});
<div id="player">
<div class="close_btn fadeIn"><img src="/img/close.png" width="50" /> </div>
<div id='player_frame'>
<iframe id=""video_iframe></iframe>
</div>
</div>
#media screen and (orientation:portrait) {
.video_iframe
{
height: 100vh;
overflow: hidden;
width: 100vw;
}
}
#media screen and (orientation:landscape) {
.video_iframe
{
height: 100vh;
width: 100vw;
}
}
Any suggestions?
Thank you all in advance.

Answer 1

There appear to be a few problems with your code:
1) The iframe ID attribute is not correctly enclosed with quotes:
<iframe id=""video_iframe></iframe>
should be:
<iframe id="video_iframe"></iframe>
2) Your CSS selectors are targeting using the class notation rather than by the element ID:
.video_iframe
{
height: 100vh;
overflow: hidden;
width: 100vw;
}
should be:
#video_iframe
{
height: 100vh;
overflow: hidden;
width: 100vw;
}
3) The "player" wrapper is likely to be restricting the height of the generated video player as the following is only being run once, and is probably setting an explicit pixel value:
$('#player').height($window.height());
Try removing this line.

Answer 2

I managed to fixed it with jQuery mobile - orientation change event:
$(window).bind( 'orientationchange', function(e){
var windowHeight = $(window).height() + 'px';
var windowWidth = $(window).width() + 'px';
if(window.orientation == 0) // Portrait
{
$("#myElement").height(windowHeight);
$("#myElement").width(windowWidth);
}
else // Landscape
{
$("#myElement").height(windowHeight);
$("#myElement").width(windowWidth);
}
});