我正在创建一个移动网站,并希望显示一个小的(88 像素 x 50 像素)YouTube 缩略图,单击该缩略图时,会全屏播放视频并将其返回到网页。它应该适用于 iOS 和 Android。
我的第一种方法是使用<a href="http://youtube.com/watch?v=oHg5SJYRHA0>...</a>
. 但是,在 iOS 上,用户被重定向到 YouTube 应用程序,他们必须手动导航回 Safari。
接下来,我尝试嵌入一个小型 iframe 播放器
<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>
这会在 iOS 上正确弹出带有“完成”按钮的全屏视频,将用户带回 Safari 页面。但是,生成的缩略图由一个大的红色“播放”按钮控制。
有没有办法隐藏嵌入式视频上的红色播放按钮?
或者有没有另一种方法可以在网页上嵌入一个小的 YouTube 缩略图,让用户在查看完毕后返回页面?
目前,我正在考虑 a) 尝试使用允许点击通过的叠加层隐藏丑陋的红色播放按钮,或 b) 尝试获取指向 YouTube 视频文件的直接链接,因为直接链接到视频文件允许用户完成后返回浏览器。然而,这些黑客似乎复杂而脆弱。有没有更好的办法?
谢谢!