Context:
I have a container element that is 100% the width and height of the iPad Mobile Safari window and inside of that I have a YouTube IFRAME to embed the video (100% width and height).
The issue is that I also have a close button anchored to the top right of the page. The close button has a higher Z Index than the iframe and has a click listener that alerts "foo" (no usable console.log on iOS6 without web debugging).
Before the Play button in the IFRAME is pressed the callback for the close button is called when it's tapped. After the play button in the IFRAME is pressed the close button callback is never called, instead the video controls are toggled in the IFRAME.
This issue does not exist on Google Chrome on a Nexus 7, just Mobile Safari on iPad.
Links:
http://pastie.org/8030167
http://jsfiddle.net/amyMM/
document.querySelector(".close").addEventListener("click", function(e) {
alert("foo")
e.preventDefault()
e.stopPropagation()
return false
})
Further information:
After adding listeners on the window for touchstart, touchmove and touchend, all of these events fail to fire anywhere on the page until the video has finished playing, after which the events fire only on the close button.
Related
I've an embedded YouTube video on a page as normal:
<iframe src="https://www.youtube.com/embed/dC0kYlHWrZ8" />
As you can see if you click the button it increments the count and feels normal and responsive. Now if you touch the video and scroll the page without playing it, it seems to add a delay to the button and it now feels sluggish/requires a hard press.
Once you play/pause the video using the native HTML 5 controls, the button becomes responsive again.
https://jsfiddle.net/qfxma8bj/2/embedded/result
I cannot seem to stop this behaviour! As our website is an SPA it delays all interactions with the site thereafter and really ruins the experience.
I am trying to implement a html 5 player inside a Webview in my app. I added the webkit-playsinline tab in video and its now playing inline in iPhone and iPad.
The issue arises is when user hits the fullscreen button, in both the iphone and iPad, it opens up the native player, which I don't want.
Can this be achieved?
I have followed this and thats why I am able to play the video inline however, when the user click on the "Full Screen" the control transfer to the native player which I don't want.
yes, I am using a UIWebView inside my app not safari specific!!
To reproduce:
Watch an YouTube video embedded with the iframe API on a tablet
Tap on the video
Instead of toggling play / pause, the tap triggers that behavior:
Is this normal at all?
This has now been fixed by Google.
I am using the following code to load a YouTube video.
jQuery(document).ready(function() {
$("#LOAD").click(function(){
data = '<iframe id="placeHolder"> </iframe>';
$('#putItHere').html (data);
$('#putItHere').show ();
document.getElementById ('placeHolder').src='http://www.youtube.com/embed/7R4LJQ7-_6Y';
});
});
Additional buttons exist as well. The problem is that only on an iPad or iPhone, the other buttons are frozen (do not respond to touch) until the video is started. Once it is started, the other buttons function. This occurs only in the 'touch' environment. Using a 'click' environment, the buttons are not frozen. So, for example on a lap top (using a mouse), I can load a video, see that it is the wrong one, and click to load a different video. On an iPad, I can not click (touch) to load a different video until the loaded video has started to play.
This has been logged as a bug with youtube api, it affects iPod/iPad/iPhone family where any links directly underneath an embedded youtube video do not work for the same height as the embedded video. See the below link:
https://code.google.com/p/gdata-issues/issues/detail?id=4569
I have a web app that is using Youtube videos embedded via iframes into a modal dialog window. In Safari on the iPad 3, iOS 5.1, the video plays properly the first time it's loaded. However, if the modal is hidden and then re-opened, the video will no longer be able to play. The player will display, but it's simply a black space with no controls. The YouTube watermark still appears, and can be clicked on.
The play button in the Safari control panel will play the audio of the video from where it left off, but the player still won't display any video.
The "related video" suggestion images will appear once the audio reaches the end, and then the video can be replayed normally.
Does anyone know what's causing this behaviour? The embedding works as intended in all major desktop browsers, and is fine the first time in iOS. It's only when it's reopened in iOS Safari that it fails.