Friday, 15 February 2013

How can I trigger a YouTube video to play in browser on iOS by clicking on a play button instead of the embed? -


On my site, I want users to watch embedded YouTube videos without leaving the page, but I do not want to have such stylish YouTube embeds Not visible before.

It is entirely possible on the desktop, because you can use the YouTube Javascript API to trigger embeds to embed, but on iOS, if the player's programmatic triggers are blocked to play How can I do this on iOS?

While thinking about this problem, I thought that an alternative route would be an opaque and styled layer But you can click through it. This would mean that the user thinks he is clicking on a beautiful button, when in fact he is just clicking to click on the embed.

There is a way to do this by using fancy (unauthorized) CSS pointer-event property! Setting it to any means that the clicks are not registered, and instead of directly following the element, punch whatever happens. In this case, YouTube embeds iframe support iOS 6 +.

This is for iOS (and maybe Android) - it uses the behavior in which the video will automatically be full screen when the game starts, if you see it on the desktop, the overlay remains Overlined ..

It can be tried to polish something more, to get it:

  • Handling the initial click and changing the UI so that they can immediately find the video.
  • Maybe resetting the video by hiding overlay, fading it or changing it to indicate "Loading ..." IFRAME

You can do some difficult stuff with this technique, like a small player iframe is covered with a small button. Still fullscreen is going to go, so it will work fine.

But even if you go there - the concept of playing a YouTube video on iOS is proof that users clicked without the embed. >


No comments:

Post a Comment