I am creating a mobile web site and would like to show a small (88px by 50px) YouTube thumbnail that, when clicked, plays the video in fullscreen and returns them to the webpage. It should work in iOS and Android.
My first approach was to use <a href="http://youtube.com/watch?v=oHg5SJYRHA0>...</a>. However, on iOS, the user is redirected to the YouTube app, and they must manually navigate back to Safari.
Next, I tried embedding a small iframe player with
<iframe id="ytplayer" type="text/html" src="http://www.youtube.com/embed/T0WepLbWyq0?autoplay=1&controls=0&modestbranding=1&showinfo=0&rel=0" frameborder="0" allowfullscreen width=88 height=50></iframe>
This correctly pops up a fullscreen video with a "Done" button on iOS that brings the user back to the Safari page. However, the resulting thumbnail is dominated by a large, red "Play" button.
Is there a way to hide the red Play button on an embedded video?
Or is there another way to embed a small YouTube thumbnail on a web page that allows users to return to the page when viewing is finished?
Currently, I'm considering a) Trying to hide the ugly red Play button with an overlay that allows clicks to pass through, or b) Trying to get a direct link to the YouTube video file, since linking directly to a video file allows the user to return to the browser when finished. However, these hacks seem complicated and brittle. Is there a better way?
Thanks!
