Trying to fix orientation of website on mobile devices to landscape

HTML & CSS
, ,
1

I am trying to create a webpage that when viewed on a mobile device automatically fixes to landscape orientation as opposed to portrait. It is a very simple page which at the moment just contains a video via iframe.

I have used code that I have found that was developed by somebody else. The code I am trying to implement is in this JSFiddle.

Here is a livelink of my attempt at getting this code to work. Could somebody please tell me why this code is not working?

Below is my code.

CSS

        body, html
        {
            margin: 0; padding: 0; height: 100%; overflow: hidden;
        }

        #content
        {
            position:absolute; left: 0; right: 0; bottom: 0; top: 0px; top: -15px;
			min-height: 100%;
            min-width: 100%
        }
		html, body {
height: 100%;
min-height: 100%;
}

@media screen and (orientation:portrait) {
body {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

HTML

<div id="content">
        <iframe src="//fast.wistia.net/embed/iframe/qnca9gdlv5?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="388"></iframe><script src="//fast.wistia.net/assets/external/E-v1.js">    </script>
    </div>
2

Why would you want to do that? Surely the user will just rotate the phone if they want to see landscape mode?

Anyway, you probably need the viewport meta tag and the webkit prefixes. This works for me on the iphone.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}
#content {
	position:absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0
}
#content iframe{
	width:100%;
	height:100%;
	border:none;
}
@media screen and (orientation:portrait) {
	body {
		-webkit-transform: rotate(-90deg);
		-webkit-transform-origin: 50% 50%;
		transform: rotate(-90deg);
		transform-origin: 50% 50%;
	
	}
}
</style>
</head>

<body>
<div id="content">
        <iframe src="http://fast.wistia.net/embed/iframe/qnca9gdlv5?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="388"></iframe><script src="//fast.wistia.net/assets/external/E-v1.js">    </script>
    </div>
</body>
</html>
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.