I have an A-Frame WebVR scene. I am trying to put it in an iframe.
<iframe src="https://aframe.io/aframe/examples/boilerplate/hello-world/"></iframe>
But when I Enter VR, it does not go full screen and render to the VR headset. How can I enable stereoscopic VR in an iframe?
You must set allowvr="yes" on the iframe. If you go to https://aframe.io, you'll see that all the examples are iframed, so you can follow their example.
<iframe allowvr="yes" src="https://aframe.io/aframe/examples/boilerplate/hello-world/"></iframe>
Note that this does not work well for mobile smartphones yet because mobile browsers like iOS Safari do not allow iframe's access to device orientation and device motion sensors. This could be worked around by post messaging device orientation data to the iframe. This is filed at https://github.com/googlevr/webvr-polyfill/issues/173
Only one <a-scene> can exist on a page. Alternatively, we can use an <iframe> with allowfullscreen="yes" and allowvr="yes":
<iframe allowvr="yes" allowfullscreen="yes" src="https://aframe.io/aframe/examples/boilerplate/hello-world/"></iframe>
Related
I am coding a mobile version of a website, and the test homepage can be seen at http://titanskateboardtools.com/mobilesite/index-hidden.html
If you scroll down you will see the video. You should try and look at this page on an iPhone 6s if possible. I think the simulator in Chrome, for example, DOES display the playbar.
Basically there is no playbar (control) even though it is not set to be hidden, so I had to modify the thumbnail and mock up a play button. If you touch the thumbnail the video does play, but the controls are not visible. So if you want to pause the video or mute it, the only option is mute your phone. When I touch the video for a split second, I see the video controls. But they disappear and holding my finger down does not keep it visible. I believe it does a quick z-index layer swap or something. Here is the embed code. I'm not a coder in any shape or form so, any fix will have to be very dumbed down. I.e., 'create this file, name it XYZ, paste this into it, stick it in the root' then in the head tag (or whatever) paste this in, changing this part to XYZ'. You get the idea. I can drive a car but don't know how the engine works. My specialty is marketing not coding. I am aware of the concept to assign 2 different z-indexes(ices) but with this div and iframe I have clue where those would go to effect video controls. :)
<script src="https://player.vimeo.com/api/player.js"></script>
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/502246225?controls=true&badge=0&autopause=0&player_id=0&app_id=58479"
name="iframe" frameborder="0" z-index=100 style="position:absolute;top:0;left:0;width:100%;height:100%;"
title="TITAN Skateboard Tools®" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
Thanks in advance. This is my first post here.
I have created a map using umap and embedded it on a website using the built-in iframe option. It works totally fine on desktop but the tile layer doesn't show up on mobile -- instead, the background is just grey. It does show up if it's manually selected through the menu by the user.
I have tried:
different browsers/devices
using a different tile theme
different screen resolutions in the dev console (all normal, just an issue on actual phones)
different iframe sizes and absolute/relative values
enabling/disabling scroll wheel zoom
current iframe code on the website:
<iframe width="100%" height="400" frameborder="0" allowfullscreen src="https://umap.openstreetmap.fr/en/map/meinfirmenwiki_426663?scaleControl=true&miniMap=false&zoomControl=true&allowEdit=false&moreControl=false&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=expanded&onLoadPanel=none&captionBar=false&fullscreenControl=true"></iframe>
Edit: it's the same when checking the map on the umap website
The configured tile layer doesn't support "retina tiles". These tiles are used for displays with a high DPI. These are commonly found on smartphones and on large desktop screens.
The difference between these two is the tile layer URL. In your configuration a "standard" tile is retrieved for example via
https://a.forte.tiles.quaidorsay.fr/en/8/137/91.png
while a "retina tile" is retrieved via
https://a.forte.tiles.quaidorsay.fr/en#2x/8/137/91.png
Note the #2x. The latter URL doesn't exist, though. This means you either have to switch to a tile server supporting retina tiles or you have to disable retina tiles for your map.
To disable retina tiles you have to remove the {r} placeholder from your tile URL. Replace
https://{s}.forte.tiles.quaidorsay.fr/en{r}/{z}/{x}/{y}.png
with
https://{s}.forte.tiles.quaidorsay.fr/en/{z}/{x}/{y}.png
When I run it in desktop its okay , but when I do inspect element and change to mobile view it doesn't work the autoplay.
iframe src="https://www.youtube.com/embed/vsSQEUSQkIs?autoplay=1" allow='autoplay'>
That is the iframe Im using putting ?autoplay=1 makes it work autoplay to desktop, but not working on mobile.
What about your experience with actual Phones?
In my experience autoplay doesn't work with iOS Safari, however Chrome on an Android phone does seem to work.
I think Safari has some inbuilt prevention for videos autoplaying.
Mobile browsers have been making it harder for videos to autoplay on mobile, to prevent involuntary data use. It's most of two years since the question was asked but it was true even then.
The YouTube Iframe API documentation says:
The HTML5 element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction (such as tapping on the player). Here's an excerpt from Apple's documentation
"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback."
While using youtube 'YouTubePlayer' cocoapod for for iOS application.
After youtube updated their policy we have to show the title, avatar and share buttons in the top portion of YouTube view. because of this fullscreen and volume button hide behind these item.
this screen from the iPhone6
How to show the fullscreen button like this below screen
because this is from the iPhone5 screen
I had the same issue in another library. In my case, I removed the "showinfo" parameter in the settings, because it is deprecated.
I have used this another library
which similar to the youtube official iOS library
The only difference between these both is:
youtube official library using WebView
which is causing the crashing issue in iOS 12.0.
where as YoutubePlayer-in-WKWebView this library using the WebKit this is working fine for me.
Fullscreen button is hide behind the title view, for this set the playsinline parameter to 0 then which enable the video can play in full screen mode.
I want to hide a video on mobile devices.
I did this by using "#media screen and (max-width: ###px)" and "display:none", this works fine but does that prevent the video from being loaded?
Basically I want the video to be not loaded with mobile data roaming, so that users on mobile devices won't use their roaming data for that.
Is there a more convenient way of doing this?
If you are asking about the css display: none then the answer is the video will still be loaded over the mobile network but it would not be visible to the end user. That being said a user could theoretically change the CSS for that element so it would display and then they could watch the video.
Video will be loaded but it is not visible to user. To pervent loading video, instead of changing css, you can remove the video from HTML using JS