Change embedded video size based on mobile device orientation

Using a combination of HTML and JS, how could I detect whether a device is in landscape or portrait and then change the size of an embedded video accordingly?

I know a fairly easy way to detect the s开发者_JAVA百科creen orientation is to compare the width to the height and see which is larger. But how could I then use these variables in the code for embedding the video? The code is from Vimeo:

<iframe src="http://player.vimeo.com/video/15813517?title=0&amp;byline=0&amp;portrait=0" width="320" height="480" frameborder="0"></iframe><p><a href="http://vimeo.com/15813524" rel="external">RCE: A Different Kind of Experience</a> from <a href="http://vimeo.com/user3163610">John D. Low</a> on <a href="http://vimeo.com">Vimeo</a>.</p>

---

You can actually do it without JS by resizing the iFrame windows using CSS. Look into CSS3 media queries. They allow you to set different layouts based on browser size, and work with most modern browsers.

W3C spec: http://www.w3.org/TR/css3-mediaqueries/

Good ALA Article: http://www.alistapart.com/articles/responsive-web-design/

Another resource: http://www.thecssninja.com/css/iphone-orientation-css

An easy way to get started with them is to use something like the Less Framework: http://lessframework.com/

---

I would reference the window height and width in javascript.

var h = window.innerHeight;
var w = window.innerWidth;

When the height is larger the device is portrait and vice versa. Then size the video width to 100% and grab the actual pixels of the width of the video in javascript then divide the width by the ratio wanted to get the height.

I would use something like to detect change.

(function oriChange(window){
    var h = window.innerHeight;
    var w = window.innerWidth;
    if(h > w){
        //portait
    }else{
       //landscape
    }

    setTimeout(function(){oriChange},500)
}(window))