現在youtubeの上に画像を乗せ、画像をクリックしたらyoutubeを自動再生させようと制作中でおります。
参考サイトを見つけてデモを作ってみたのですが、PCだと画像をクリックしたら正常に自動再生するのですが、スマートフォンだと画像をクリックしても自動再生になりません。
こちらをスマートフォンでも自動再生するようにするためにはどのような処理が必要でしょうか?
Javascriptもしくはyoutube APIに詳しい方お力を貸していただきたく思います。
また、デモサイトで制作している方法以外に方法がありましたら教えていただけますと幸いです。
ご協力のほど何卒宜しくお願い致します。
--
デモサイト
こちら解決しましたので、非表示にさせていただきました。ご協力いただきましてありがとうございました。
参考にしたサイト
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12127607887
実際に使用されているサイト
http://kdmode.jp/
--
ソースコード一覧
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>movie demo</title> <style> #video { width: 734px; height: 488px; margin: auto; position: relative; } #play_button { width: 734px; height: 488px; cursor: pointer; } </style> <script> function init(){ var video = document.getElementById("video"); var playButton = document.getElementById("play_button"); playButton.onclick = function(){ video.innerHTML = '<iframe width="734" height="488" src="//www.youtube.com/embed/Lv-sY_z8MNs?controls=0&showinfo=0&autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>'; }; } window.onload = init; </script> </head> <body> <div id="video"> <div id="play_button"><img src="movie-thumb.jpg" width="734" height="488" alt=""/></div> </div> </body> </html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/09/22 06:46
退会済みユーザー
2017/09/22 06:59
退会済みユーザー
2017/09/22 07:42
退会済みユーザー
2017/09/22 08:13
退会済みユーザー
2017/09/22 09:54
退会済みユーザー
2017/09/22 10:08
退会済みユーザー
2017/09/22 14:37