I've been trying to work this out for a while but I keep coming to a dead end.
Scenario:
I have a youtube video embedded in an iframe on my page.
I am able to play the video just fine on my Mac when using voiceover however on my iPhone 6 and an iPad, when I use VoiceOver and the swipe gestures to move through the page and attempt to play the video, the viewport scrolls to the top of the page when focus reaches VoiceOver.
Here is a gif that is currently happening.
Incidentally, this problem doesn't occur when the youtube video is one of the first items on the page, it only happens when the video is below the fold as it were. The current has JS to make the heigh of all the divs the same.
I should mention I have seen this previous question and indeed attempted to implement it but the issue was still occurring.
Any help or advice would be appreciated.
Related
My client's site usesfancybox to load a lightbox for an embedded YouTube video. Clicking on the "play" image button in the middle of the video launches an embedded YouTube video.
This works fine on desktop, but will not work on my iPhone X (iOS 12). It will sometimes work for other iphone users after 3-4 clicks on the play button, but I cannot load it at all.
What should I be looking at to fix this on iOS? This is driving me crazy!
Page in question: https://www.maternlawgroup.com/
First, fancybox works fine, you can clearly see on the homepage or any other demo.
Secondly, in situations like this, you should start by checking output of browser console. There are a lots of JS errors on your page (not related to fancybox) and any JS issue can prevent further execution of the code. So, start by fixing them.
And last, I could not find fancybox on your page. It looks like you are using buggy custom JS code.
My iOS app has some html5 pages. When you slide upper or down, then comes the question ,if you slide quickly , the page will block at some point, looks like the effect of the bounds property of scrollview,but just the opposite, it cann't show the full content on the page .only if you slide quiet slowly, then the other content on the page shows. It drives me crazy....
Load this page on an iPhone, you will see a video player with a cog icon on the control bar. Directly touching this button will not register anything, but if you touch a bit outside to the right, it will fire a hover event. The popup radio list is not selectable either.
All of these work on an iPad. Any idea why?
Well I found out that the <video> element on iPhone Safari will block all touch events. The workaround I use is to reduce its dimension to 1px*1px and always show the poster image, giving the illusion of an actual video. Youtube employs the same workaround.
P/S: the link above may change over time.
This is a bug that I have managed to fix by brute force, but I don't understand why the solution worked.
The problem was that embedded YouTube videos weren't working on a particular (responsive) site on iPad (tested in iOS7) in landscape view. I managed to narrow it down to a particular CSS rule that was showing a search input in the header when the browser was wide enough, so it would show in an iPad's landscape view but not in its portrait view.
After a little more brute force fiddling, I found that removing the type="search" from the input tag (which causes it to fall back to the default type="text") would fix the problem. None of my searches have come up with an explanation for why this works though, or even anyone else experiencing the same thing.
Some more details on the bug
The site works by showing an image at first, which would be replaced via JavaScript with the YouTube iframe when clicked. After this first click, it would autoplay on desktop browsers, and on the iPad it would load the video but wouldn't play until the user presses it again.
If the type="search" input was visible (display: block;), then tapping on the embedded video would not cause it to play; there would be no visible response to the tap. If I zoomed in and tapped on the controls at the top, like the name of the video, I could see them being underlined, and testing showed that there was no element covering the iframe and intercepting events.
Strangely, tapping on the very edge of the right hand side of the iframe would cause the video to start playing correctly. Otherwise, changing the iPad to portrait view (causing the search input to be hidden via CSS) would enable the iframe to be clicked in order to start the video playing. After that first click, all the video controls would work regardless of whether or not the search input was showing.
Just experienced this first-hand myself and wanted to add my kudos for you having written this up. Your SO question, even without an answer, pointed me in the right direction.
In my case it was nothing to do with Youtube. I had a page generated by Drupal in a large-ish site, in which the site-wide search mechanism used an auto-complete drupal module which had type="search" as the main input's type.
In IOS, users reported that Facebook, Twitter and Google Plus's respective "like" buttons all didn't work, along with a much larger angular app embedded in the page. They all used iframes and none of them seemed to respond to clicks.
Changing this seemingly innocuous, unrelated input's type from search to text solved this problem immediately.
Baffling.
I'm making a mobile HTML5 app. I've disabled scrolling (and enabled it on certain parts) and it's all good and well, but the problem starts when I embed a Youtube video through an iFrame. It seems that when a user presses an iframe, the whole page scrolls and I can't seem to find a way around this. Adding event listeners does not work.
You really can't control what happens in the iframe.
But if you want to be a little clever you can put elements directly over the iframe, like a div or transparent canvas or whatever you want, that will catch all of the events so that the user simply cannot press the iframe.
Not the most ideal, it means users cant press the buttons on the youtube video, but its probably your only real option.