1

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 screen 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>
Clifford
  • 88,407
  • 13
  • 85
  • 165
Kyle Parker
  • 11
  • 1
  • 2
  • I recall that iPhone (3, and 3GS) reports its screen width as 480px *regardless* of its orientation. Incidentally, you might take a read of this question to see if there's anything useful there: [Can JS/jQuery determine the orientation of the iPhone?](http://stackoverflow.com/questions/2323281/can-js-jquery-determine-the-orientation-of-the-iphone) – David Thomas Feb 01 '11 at 16:18

2 Answers2

1

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))
Jacob Lowe
  • 698
  • 7
  • 16
0

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/

Graham Conzett
  • 8,344
  • 11
  • 55
  • 94
  • Thanks for the idea, and I have managed to do a partial workaround by setting width to 100% and height to 320px. This way, in portrait it is square and in landscape it is a 3:2 ratio and both look good. However, this looks bad in a desktop browser. So really, is there a way for me to say with javascript if(width>500) then width="X" and height="Y"? – Kyle Parker Feb 01 '11 at 17:35
  • The thing about CSS3 media queries is they essentially allow you to set styles for a few different resolutions, rather than try and accommodate all resolutions. For example you would set a video width and height for layouts below a certain number of pixels in width and a different width and height for ones above a certain browsers width. Check out the less framework link I posted above for examples. – Graham Conzett Feb 01 '11 at 18:09