this is a new behavior that started lately (last 2 months) in IOS mobile devices only. in android devices the pause/play button overlay still exists.
The behavior:
when embedding inline youtube video with controls=0, when the video plays, the only way to stop it is by clicking the middle of the video on the pause button overlay (except using an external button and the api off course). in desktop and android this works great but in IOS the pause button overlay in the middle of the video does not exists any more. this means that in order to give the user the ability to stop the video we must put controls=1 which is less convenient.
is this intended or a bug?
also, the property fs=0 (is to allow full screen) does not work on IOS.
Thanks
Related
I am developing a H5 Canvas game using PIXI js.
I am struggling in implementing the ios Safari swipe up to full screen message.
Added a new div with window.width + 1000 px.
It does remove the safari address bars but i am not sure when to remove the div. i.e. i am not able to identify if i am in full mode or not.
Also, what should i do to get back the div enabled if someone accidentally or forcefully comes out of full screen mode?
I am open to use any opensource lib as well but wasn't able to find one except screenfull.js which doesn't supports safari mobile
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.
What I've done is have an image layer over a flash that uses my webcam to take a snapshot. I positioned the image correctly over the flash with position: absolute. And added wmode: transparent to my flash embedding.
Then I need my mouse clicks to be forwarded to my flash content, so my users can allow their webcams to be used. I added point-events: none; to my overlaying image.
The situation here is that everything's displaying correctly cross-browsers, but only on chrome (Windows and Mac) I'm able to click on the "allow" button and actually be able to use my webcam. On Safari, Firefox, IE, they are not letting me click on allow.
I'm wondering if there are known issues with point-events for accessing an underlying flash item, or I'm just having problems with my flash player. Since if I switch my flash to a clickable button underneath my overlaying image, it works perfectly fine.
Okay, this is a strange one. When the embedded video is clicked (on Chrome) to be seen on fullscreen, it's moved on the right because of the sidebar. On Firefox, it's as it should -the video is correctly stretched over the whole site. However, there is something that doesn't allow Chrome to do that.
Okay, I managed to find that this is connected with the animation-fill-mode. And I'm afraid that this is duplicate of HTML5 video won't maximize beyond container dimensions in native full screen mode