モバイル端末で、画像をタップして Youtube 動画を再生したい

Question

###前提・実現したいこと
画像ボタンをタップすることで、Youtube 動画を再生したいです。

###対応したい端末の種類
iPhone / iPad / Android スマートフォン / Android タブレット です。
※一つの処理で全て対応する必要はなく、分岐する形でも構いません。

###現状
iPhone であれば、opacity を 0 にした iframe を画像の上に置くことで再生できますが、
それだとインライン再生が可能な iPad や Android タブレットなどでは
（再生はされるものの透明なので）表示できません。

iframe をタップで opacity を1にすることもできなかったので、
今のところは iPhone / iPad / Android で分岐して、
Opacity 式と YouTube にリンクを貼る方式で振り分けています。

インライン再生可能な端末で、画像をクリック→動画が再生される良い方法はないでしょうか。

良い方法をご存じの方、どうかご教示ください。

Answer 1

普通にYoutubeをiframeで表示させるのではだめなのでしょうか？

Comments

[kaier]

返答ありがとうございます。
しかしながら、デザイン上の要望で、「画像をクリックして再生」したいのです。
クリックすることで iframe を表示する、という形なら簡単なのですが、それだと1タップ増えてしまうので、悩んでおります。
良い方法があれば、ぜひご教示ください。

[turbgraphics200]

その画像が動画のサムネイルであれば、すでにiframeプレイヤーがそういう作りとなっていますので、要望にかなっていると思いますが。

[kaier]

画像サムネイルではなく、デザインされたボタンです。
やりたいのは「画像ボタンをタップして Youtube を再生する」です。

[turbgraphics200]

ボタンをiframeを覆うように配置して、ボタンはpointer-events: noneに設定してマウスイベントは、ifarameに透過させるようにすればタップすれば再生が開始されます。後は、プレイヤーのステートチェンジイベントを拾うようにして、再生開始を検知したらボタンを消すという風にすればいいかと思います。
サンプルページ
https://jsfiddle.net/y8cohc3x/

[kaier]

年単位でお返事が遅れてしまい申し訳ありませんでした。
今更ながら、高評価及びベストアンサーにさせていただきました。
ありがとうございました。