質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

Q&A

解決済

1回答

3154閲覧

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

kaier

総合スコア7

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

0グッド

0クリップ

投稿2017/02/14 06:42

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

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

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

投稿2017/02/14 07:28

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kaier

2017/02/14 07:30

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

2017/02/14 07:32

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

2017/02/14 07:48 編集

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

2017/02/14 08:48 編集

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

2019/01/09 07:57

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問