I am creating a mobile website and want to show a small (88px by 50 pixels) thumbnail of YouTube, which, when clicked, plays the video in full screen and returns them to the web page. It should work on 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 must manually return to Safari.
Then I tried to embed 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 displays the full-screen video with the Finish button on iOS, which returns the user to the Safari page. However, the large, red “Play” button dominates the resulting thumbnail.
Is there a way to hide the red button for playing the 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 they finish browsing?
I am currently considering a) An attempt to hide the ugly red "Play" button with an overlay that allows you to scroll clicks, or b) An attempt to get a direct link to a YouTube video file, since linking directly to the video file allows the user to return to the browser upon completion. However, these hacks seem complex and fragile. Is there a better way?
Thanks!
source share