17

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.

Mark Hanna
  • 3,206
  • 1
  • 17
  • 25
  • He's clearly explained the answer above - read the post.... – Filth Oct 24 '13 at 04:15
  • 2
    I would submit this as an iOS bug so that they can look into it in case it is a bug. – Marventus Dec 23 '14 at 04:25
  • Without more information or a link this is near impossible to "answer" but this to me sounds like an element was sitting over the `video` element when in landscape. Hence clicking on the side would allow it to start playing but the middle would not. – Sphvn Mar 17 '15 at 08:42
  • Sphvn, if you read the question carefully you'll see I include an answer in there as well, and was posting it here in case others run into the same problem. – Mark Hanna Mar 17 '15 at 19:57
  • Does the video play after you click a second time on the play button? I had a similar bug with iOS 7: http://stackoverflow.com/questions/25731106 – ausi Mar 27 '15 at 10:52
  • From what I remember of this bug, no. In the landscape view I could tap on the video as many times as I liked and, unless I tapped on the far right edge, it wouldn't start to play. – Mark Hanna Apr 06 '15 at 23:33
  • I actually experienced a similar bug. I found that it was a IOS defect with some elements. My assumption would be that the type='search' changes the native behaviour of the input element. In my case, any iframe / html5 media element had a lower z-index than the input and the input erroneously had a *touch surface* much larger than what was visibly rendered. Giving the input width and height, or forcing z-index *solved* my issues at the time. I could find no reference or bug report for this, and it no longer seems to be an issue, so I can not verify or reproduce ... – Eclectic Apr 08 '15 at 13:11
  • If you're wondering about autoplay, I learnt that I had to give it up on mobile device because of an aventually "disable feature" on mobile devices. That means autoplay would be blocked on mobile devices to avoid excessive data downloads. – Sebastien Apr 16 '15 at 13:37
  • We've just experienced this vary issue on a site in dev. Although, I could not find a "sweet spot" to tap and start the video, I noticed that if I switched the orientation FROM landscape TO portrait that the iframe / video WOULD respond to a tap and play. Switching back to landscape presented me with the same issue. Still looking for a fix to this. Did you report a mobile safari bug? – Markus Aug 13 '15 at 13:19

1 Answers1

3

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.

xcession
  • 268
  • 2
  • 11