iphone/ipod mobile safari causes video element to disappear on rotation.

Joined
Jan 12, 2011
Messages
1
Reaction score
0
Points
1
Hello all.

Posted this question over at stackoverflow but didn't get much of a response. I'm hoping you guys can help me with a bug I'm experiencing.

I am writing a very simple website that displays a video. I have separate stylesheets for the different rotation states of the device, like so:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait-style.css"/>
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape-style.css"/>

The sheets load and display the content properly when the user first navigates to the site in the respective orientation. However, when the user changes orientation, the video element in the following code disappears, while all other styling for the orientation is correctly applied.

<body>

<div id="wrapper">

<div id="videowrapper">
<a name="docstart"></a>

<a id="headerlogo" href="http://www.whistlerslidingcentre.com/">
</a>

<video id="mainvideo" width="640" height="480" controls preload="auto">

<source src="output.ogv" type="video/ogg" />
<source src="output.mp4" type="video/mp4" />

<object width="640" height="480" data="flowplayer-3.2.5.swf" type="application/x-shockwave-flash">
<param name="movie" value="flowplayer-3.2.5.swf" />
<param name="allowfullscreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<param name="flashvars" value="config={'clip':{'url':'output.flv', 'autoPlay':false, 'autoBuffering':true}}" />
</object>

<div id="trollface">
<p>You do not have Adobe flash player installed on your browser. You may download it <a href="http://get.adobe.com/flashplayer/">here</a>.</p>
</br>
<p>Alternatively, you may also use a modern, standards-compliant browser (such as <a href="http://www.mozilla.com/en-US/firefox/">firefox</a>, <a href="http://www.google.com/chrome/intl/en/landing_chrome_mac.html?hl=en">chrome</a>, <a href="http://www.opera.com/">opera</a>, or <a href="http://www.apple.com/safari/">safari</a>), or download the video by clicking the download link below.</p>

</div>

</video>

<div id="footer">

<a id="download" href="output.mp4.zip"></a></p>

</div>

</div>

<div id="socialwidgets" class="addthis_toolbox atfixed">

<div class="custom_images">

<a class="addthis_button_facebook"><img src="images/facebook.png" alt="Share to Facebook!" /></a>
<a class="addthis_button_twitter"><img src="images/twitter.png" alt="Tweet it!" /></a>
<a class="addthis_button_reddit"><img src="images/reddit.png" alt="Post on Reddit!" /></a>
<a class="addthis_button_digg"><img src="images/digg.png" alt="Submit to Digg!" /></a>
<a class="addthis_button_myspace"><img src="images/myspace.png" alt="Need More?" /></a>
<a class="addthis_button_linkedin"><img src="images/linkedin.png" alt="Need More?" /></a>
<a class="addthis_button_wordpress"><img src="images/wordpress.png" alt="Tweet it!" /></a>
<a class="addthis_button_blogger"><img src="images/blogger.png" alt="Post on Reddit!" /></a>
<a class="addthis_button_stumbleupon"><img src="images/stumbleupon.png" alt="Submit to Digg!" /></a>
<a class="addthis_button_youtube"><img src="images/addthis.png" alt="Need More?" /></a>

</div>

</div>

</div>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

</body>

What is causing this bug and how can it be destroyed?

Thanks in advance for all your help.
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top