There are a million resources out there explaining that iOS browsers don't support the fullscreen web API.
But I know there is a way to do landscape fullscreen on iOS. See these examples:
https://poki.com/en/g/stick-merge
https://www.google.com/doodles/doodle-champion-island-games-begin
When you go to those pages, they tell you to rotate your phone to landscape, and once you do - the entire phone UI is gone. True fullscreen.
I just can't figure out what's the API for doing that.
I just figured it out. Boy do I feel silly.
There is no API.
Just browse to any page on Safari iOS, rotate your phone to landscape, and bam, you're in fullscreen mode.
Related
Does anyone know if its possible to use the Twilio Programmable video API correctly from phone to laptop. Every time I make a video call on two laptops everything works fine.
But, if I call from phone to a laptop, the laptop displays a black screen (which should be the stream of the iphone camera). Ive searched everywhere, and do not see anyone facing the same issue. I am using the javascript SDK by the way, and using Safari for the iphone, chrome for the laptop.
I've developed a one-page website using Bootstrap. http://cpproject.co.uk/social2/
The website works totally fine on all other devices, responsive and also you can scroll.
However, you can't scroll using the touch screen on Windows Devices and Laptops which have touch screen and using the IE Browser. (Works fine on Chrome on a Touch Laptop)
I can't find anything similar to this. I would really appreciate any help or fixes.
Thanks a lot in advance.
I have a site with full screen background video using BigVideo.js. (http://dfcb.github.io/BigVideo.js/) On mobile devices, android is working great. However, on an apple device the video loads with a 'Play' button that you need to click which loads the video in a modal window over top of the site. Any ideas on how to make this behave like desktop/android devices where the video seamlessly plays in the background? Could there be an Apple app-driven event detecting video and forcing play in a modal?
Example HTML:
<div class="screen" data-video="vid/1-Statue.mp4">
Many mobile devices do not support video autoplay - the idea is to avoid users running up large mobile data bills. Last time I looked all the smaller iOS devices, i.e. iPhones did not.
There is a popular javascript library to detect browser features which includes a test for autoplay which may be useful for you:
https://github.com/Modernizr/Modernizr/blob/master/feature-detects/video/autoplay.js
Similarly, inline video is not supported on all Mobile devices - it is evolving so more devices do now but it is probably not a good idea to rely on it. Again, there is at least one open source library trying to address this on iPhone (inline video works on iPads last time I checked, as far as I recall):
https://github.com/newshorts/InlineVideo
I have an animation made in Adobe Edge, featuring an animated body with an overlay of a face, pulled via an URL parameter.
It works fine on web. However, on IOS a video can only be played full screen - and then the image overlay obviously doesn't show.
Does anyone know a solution of how I could make this work on IOS? Either some way to convert the video+overlay to a merged video, svg animation or something else? Or just play the video without fullscreen - but I don't think this is possible.
On iOS mobile devices videos played in Safari go full screen with no other elements available. There is no way to stop this behaviour in Safari. Videos can be made to play inline within a native app, but not Safari unfortunately.
on iOS tablet devices, videos can be played inline within Safari.
However,you mentioned that you've created the animation in Adobe Edge Animate? I'd be tempted to publish your animation as a web animation and use that where your video would be.
I'm trying to make new web-site that background has a video.
I found a JS library: tubular
This plugin working as expected in my desktop browser. (Checked on : Chrome,Safari,Firefox)
But, This NOT working in mobile browsers.
I tried in (Nexus 5, HTC M8).
Both devices are not responding for video background.
Anyone there who knows the solution for this issue or some alternative library that I can use?
I suspect this is a problem with the video background not autoplaying on a mobile browser. This is by design though, it is a mechanism that prevents autoplaying videos from using up bandwidth unnecessarily.