iOS 8 Embedded YouTube in HTML web app fails - html

YouTube iOS8 Media Load Issue - Media plays successfully while in Safari, but when the app is loaded from a Home Screen web clip, playing the video fails.
Moreover, tapping a link to navigate away from the page while the media is failing to load results in a complete crash of the app to the Home Screen.
Here is a link that demonstrates this (obviously run on your iDevice). You can run it initially in Safari browser, it'll work fine. Install it as a home screen icon, playing video will fail, and clicking the bottom link will crash the app.
http://nterspace.com/youtubeissue.html
The code that works when the app is loaded up in the Safari browser is:
<iframe width="100%" maxwidth="432" height="270" src="//www.youtube.com/embed/_j4KrMAygJI" frameborder="0" allowfullscreen></iframe>
Anyone have any thoughts? Is this bad embed code?

Today, April 09, 2015. Finally , this issue is partially resolved. After updating to version 8.3 my webapps returned to work again for the dailymotion and vimeo videos. Youtube videos are now redirecting to the native application, which is very annoying.
EDIT:
As the youtube videos was redirecting to the native application , I had to use the youtube url as follows:
<iframe width="100%" height="300" src="https://www.youtube-nocookie.com/embed/hdjL8WXjlGI?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
So my users can watch the video without having to leave the webapp.
For some reason the nocookie option does not redirect. Let's hope that this will be completely fixed in the next iOS version.

I am having the same issues!
This is an issue particular to IOS8. Please see: https://discussions.apple.com/thread/6558443 Hopefully Apple will fix this issue soon. Another issue arising is unable to use Play button:
The Play button on a youtube embed does not work on android-chrome
UPDATE: They have fixed the PLAY button ISSUE!

It was still broken on 8.3 for me, but it turned out it was because there was an <input type="search"> element on the page (bizarre). Made a video: https://www.youtube.com/watch?v=rrKxAIXnydE

iOS 8.3 fixes the bug. Videos are now playable from homescreen webapp, including from appcache.
source:

Just tested this on iPad with IOS 8.1.3 - still broken.
sneuf's iframe works for safari pages but not when loaded from home screen (web clip).

Related

YouTube iframe cannot go full screen

Youtube used to work fullscreen on my site, but a few weeks ago (i think?) it started saying "Youtube cannot go full screen".
I got the code snipped from my site here. And it works in here:
https://www.w3schools.com/code/tryit.asp?filename=GNBNH5E3ZCPS
Any idea why it wont work on my site? Its exacly the same code.
The site i mentioned is www.contribee.com (scroll down a bit for the iframe video)
Also on a side note: it dose go fullscreen on a mobile browser. But it wont work on desktop Chrome (it does work on w3 editor from any browser)
Try changing the fullscreen = true; and call a function
https://support.google.com/youtube/answer/72689?visit_id=637480296059280325-3361042641&rd=1
<iframe id="video" src="Source" frameborder="0" allowfullscreen></iframe>

Only one video is playing simultaneously on Safari (Mac)

I used Simple Peer(WebRTC), ReactJS for my video call service. In the video call screen, I used 2 video tags(contact video and user video) for video playback. When the call gets started after a successful connection, only the contact video is getting played(1st video tag) and when the contact turns off their video user video is getting played(2nd video tag).
This only happens on Safari(I only tested on Mac). It works fine in other browsers(Google Chrome, Firefox).
Is there a way to fix this issue?
WebRTC depends a lot on browsers and Safari has specific requirements (like strict order of tracks). Check JS console to identify any errors.
You can experiment with a turnkey html5 videocall solution that works and try to replicate.

ios 10 youtube iframe not playing

I'm using the following iframe in my HTML code:
<iframe src="<iframeurl>">?autoplay=1" frameborder="0" allowfullscreen></iframe>
On iPhone with iOS10 this doesn't autoplay. I'm getting the red play button and stuff. On windows chrome and others all works fine autoplay starts correctly. But not with the iphone.
Is there anything I could do in javascript or by manipulating the URL to make this autoplay? I'm aware that Apple used to disallow autoplay before iOS10 so maybe I'm doing something wrong here..
You're experiencing this because Apple doesn't allow embedded media to play automatically — the user always initiates playback.
This is mentioned in YouTube's IFrame Player API documentation as well. And no, I don't think you can and should override this since that is a bad practice.
Just add the play trigger to onClick and then execute call the click event from an AJAX response.
Should do the trick ;)
It is not that iOS prevents any video from autoplaying (at least not so since iOS 10), but it is unmuted videos that are prevented from playing without user interaction. So if you embed a YouTube video with muted=1 appended to the URL, autoplay works again.
P.S. the muted parameter is not documented for the YouTube embedded players. It is nowhere to be found in the official doc: https://developers.google.com/youtube/player_parameters. Yet it has been working for quite a while. If you worry it may not work someday, you can take the programmatic approach via the iframe API: first mute the video and then play it when the ready event is emitted.
putting this in config.xml worked for me:
<allow-navigation href="*://*youtube.com" />

Embedded facebook video not working in safari

I have a simple page with this HTML code :
<iframe src="http://www.facebook.com/video/embed?video_id=395974580579165"
width="1280" height="720" frameborder="0">
</iframe>
It is working fine in chrome but not in safari. I only have the preview with safari, but I cannot play the video.
However, a youtube embedded video in an iframe work both on chrome and safari
Any idea ? What is the correct way to embed a facebook video ?
Safari version : 8.0.2 (10600.2.5)
This type of Facebook embedded video requires flash player, which is not installed by default with Safari.
The problem is that Safari fails silently and doesn't even ask the user to install the plug-in. So I had no clue...
The embedded link for facebook looks something like this:
https://m.facebook.com/video/your-video.php?v=12345
Have a look at this post:
Facebook embeded video with iframe not working
It gives you more insight. Hope this helps
Bring up the Adobe Flash Settings page with this link http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager.html then starting at Global Privacy Settings, compare a working browser (e.g. Chrome) to the non working one (Safari in my case).
In my case, I had locked down Flash too much in Safari (restricting e.g. storage space allowed in the browser) to the extent that Facebook videos just appeared as a black space with no error message. Just wouldn't play back.
But adjusting the settings to those of the working Chrome Flash plugin re-enabled Flash video (Safari / Mac OSX) for me.

Vimeo embed issue on iPhone

Here is my dilemma:
I am creating a site that will allow users to submit videos that will be posted to the site. The user submits a Vimeo link and the video gets posted in an embedded format to the site. Unless the creator of the video has a PRO or PLUS Vimeo account, embedded vimeo videos do not work on iPhone 3GS (not sure about iPhone 4, but they do work on iPad).
Is there any sort of workaround to get embedded vimeo videos working on iPhone? Any ideas?
Edit: I have checked and it does work on iPhone 4. But still not 3GS.
Embed Code
<iframe src="http://player.vimeo.com/video/<?php echo $videos[$i]; ?>?title=0&byline=0&portrait=0&color=ffff00" width="" height="" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen ></iframe>
I found a solution, by registrate a plus account you can generate a mobile version. Works with all iPhone models.
Well with out any code it's hard to tell, are you embeding the video via iframe?
http://vimeo.com/api/docs/player
I'm dealing with this same issue right now. My best guess is that the Vimeo videos are encoded in H.264 main profile, whereas the 3GS can only play videos encoded in H.264 baseline profile.
This article has a discussion of the differences:
http://www.niallkennedy.com/blog/2010/07/h264-video.html
It looks like there is probably not an easy way around this issue. As you indicated, all videos play fine in the iPhone 4 and 4S since they support H.264 main profile.