Control bar disappears when rotating div orientation

stef — Jan 16, 2017 02:48AM EST

---

Hi guys,

I'm setting up my jwplayer instance to look like it loads in landscape mode, if you visit the site from Safari on iOS or Chrome on Android.

I've got 3 divs. The container div, the app div (I'm using React, so I render everything into this div) and then the player div, where the player gets mounted.

The CSS I'm using looks like this:

@media only screen and (max-width: 479px) {
.container {
width: 100vh;
height: 100vw;
margin-top: -100vw;
object-fit: cover;

-webkit-transform: rotate(90deg);
-webkit-transform-origin: bottom left;
-moz-transform: rotate(90deg);
-moz-transform-origin: bottom left;
-o-transform: rotate(90deg);
-o-transform-origin: bottom left;
-ms-transform: rotate(90deg);
-ms-transform-origin: bottom left;
transform: rotate(90deg);
transform-origin: bottom left;
}
}

@media only screen and (orientation:portrait) {
.container {
width: 100vh;
height: 100vw;
margin-top: -100vw;
object-fit: cover;

-webkit-transform: rotate(90deg);
-webkit-transform-origin: bottom left;
-moz-transform: rotate(90deg);
-moz-transform-origin: bottom left;
-o-transform: rotate(90deg);
-o-transform-origin: bottom left;
-ms-transform: rotate(90deg);
-ms-transform-origin: bottom left;
transform: rotate(90deg);
transform-origin: bottom left;
}
}