Calling requestFullscreen() method on video element does the job. Video goes fullscreen and also rotates to landscape in mobile browsers.
However calling this method on div element which is parent to my video element makes it fullscreen but does not rotate it to landscape when in portrait mode.
How can i rotate the whole div element to landscape?
Have you styled your containing DIV to look differently in different orientation and when it is full screen? I'm guessing that is what you are missing.
Take a look at styling items for :fullscreen and media queries.
For those that might experience the same issue:
the solution is to use the screen.orientation API's. example: when you call requestFullScreen you can apply the screen orientation in the following way...
when on mobile the default screen.orientation.type == "portrait-primary", you can change it to "landscape-primary" with your video element custom controls or any element you wish to toggle fullscreen and change screen orientation on mobile
