Forums
New posts
Articles
Product Reviews
Policies
FAQ
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Menu
Log in
Register
Install the app
Install
Forums
macOS & iOS Developer Playground
macOS - Development and Darwin
iphone/ipod mobile safari causes video element to disappear on rotation.
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="scipioafricanus" data-source="post: 1168200" data-attributes="member: 186338"><p>Hello all.</p><p></p><p>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.</p><p></p><p>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:</p><p></p><p><link rel="stylesheet" media="all and (orientation<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite7" alt=":p" title="Stick out tongue :p" loading="lazy" data-shortname=":p" />ortrait)" href="portrait-style.css"/></p><p><link rel="stylesheet" media="all and (orientation:landscape)" href="landscape-style.css"/></p><p></p><p>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.</p><p></p><p><body></p><p></p><p><div id="wrapper"></p><p></p><p> <div id="videowrapper"></p><p> <a name="docstart"></a></p><p></p><p> <a id="headerlogo" href="http://www.whistlerslidingcentre.com/"></p><p> </a></p><p></p><p> <video id="mainvideo" width="640" height="480" controls preload="auto"></p><p></p><p> <source src="output.ogv" type="video/ogg" /> </p><p> <source src="output.mp4" type="video/mp4" /> </p><p></p><p> <object width="640" height="480" data="flowplayer-3.2.5.swf" type="application/x-shockwave-flash"> </p><p> <param name="movie" value="flowplayer-3.2.5.swf" /> </p><p> <param name="allowfullscreen" value="true"/> </p><p> <param name="allowscriptaccess" value="always"/></p><p> <param name="flashvars" value="config={'clip':{'url':'output.flv', 'autoPlay':false, 'autoBuffering':true}}" /></p><p> </object></p><p></p><p> <div id="trollface"></p><p> <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></p><p> </br></p><p> <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></p><p></p><p> </div></p><p></p><p> </video></p><p></p><p> <div id="footer"> </p><p></p><p> <a id="download" href="output.mp4.zip"></a></p></p><p></p><p> </div></p><p></p><p></div></p><p></p><p> <div id="socialwidgets" class="addthis_toolbox atfixed"> </p><p></p><p> <div class="custom_images"></p><p></p><p> <a class="addthis_button_facebook"><img src="images/facebook.png" alt="Share to Facebook!" /></a></p><p> <a class="addthis_button_twitter"><img src="images/twitter.png" alt="Tweet it!" /></a></p><p> <a class="addthis_button_reddit"><img src="images/reddit.png" alt="Post on Reddit!" /></a></p><p> <a class="addthis_button_digg"><img src="images/digg.png" alt="Submit to Digg!" /></a></p><p> <a class="addthis_button_myspace"><img src="images/myspace.png" alt="Need More?" /></a></p><p> <a class="addthis_button_linkedin"><img src="images/linkedin.png" alt="Need More?" /></a></p><p> <a class="addthis_button_wordpress"><img src="images/wordpress.png" alt="Tweet it!" /></a></p><p> <a class="addthis_button_blogger"><img src="images/blogger.png" alt="Post on Reddit!" /></a></p><p> <a class="addthis_button_stumbleupon"><img src="images/stumbleupon.png" alt="Submit to Digg!" /></a> </p><p> <a class="addthis_button_youtube"><img src="images/addthis.png" alt="Need More?" /></a></p><p></p><p> </div></p><p></p><p></div></p><p></p><p> </div></p><p></p><p><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script></p><p></p><p></body></p><p></p><p>What is causing this bug and how can it be destroyed?</p><p></p><p>Thanks in advance for all your help.</p></blockquote><p></p>
[QUOTE="scipioafricanus, post: 1168200, member: 186338"] 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. [/QUOTE]
Verification
Post reply
Forums
macOS & iOS Developer Playground
macOS - Development and Darwin
iphone/ipod mobile safari causes video element to disappear on rotation.
Top