youtubeの上に画像を乗せ、画像をクリックしたらyoutubeをスマートフォンでも自動再生させるようにしたい。

現在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件

ベストアンサー

シミュレータで確認する限り、以下のコードでiOS１０系であれば動きました。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <style>
5      .hide {
6        display: none;
7      }
8    </style>
9  </head>
10  <body>
11    <div id="player" class="hide"></div>
12    <img src="https://dummyimage.com/100x30/000/fff&text=play">
13
14    <script
15    src="https://code.jquery.com/jquery-3.2.1.min.js"
16    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
17    crossorigin="anonymous"></script>
18    <script>
19      var tag = document.createElement('script');
20
21      tag.src = "https://www.youtube.com/iframe_api";
22      var firstScriptTag = document.getElementsByTagName('script')[0];
23      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
24
25      var player;
26      function onYouTubeIframeAPIReady() {
27        player = new YT.Player('player', {
28          height: '360',
29          width: '640',
30          playerVars: { // 追記 ここから
31            controls: 0,
32          }, // 追記 ここまで
33          videoId: 'M7lc1UVf-VE',
34          events: {
35            'onReady': onPlayerReady,
36          }
37        });
38      }
39
40      function onPlayerReady() {
41        var $player = $('#player');
42        var $button = $('img');
43
44        $button
45          .on('click', function () {
46            $player
47              .removeClass('hide');
48            $button
49              .addClass('hide');
50
51            player.playVideo();
52          });
53    }
54    </script>
55  </body>
56</html>
57

ただ、iOS9系は以下に記述されている制限のため、動作しないようです。
YouTube - IFrame Player API - 自動再生とスクリプト再生

投稿2017/09/22 04:58

編集2017/09/22 10:07

退会済みユーザー

総合スコア0

退会済みユーザー

2017/09/22 06:46

Tak_Matzさんご回答ありがとうございます！こちらでできたのですが、パラメータをつけたいのですがどうやってつければ良いのでしょうか？ ?controls=0&showinfo=0&autoplay=1&rel=0をURLのあとに付けたいのですが可能でしょうか？

退会済みユーザー

2017/09/22 06:59

各パラメータは以下を参照してください。 https://developers.google.com/youtube/player_parameters?hl=ja#Parameters

退会済みユーザー

2017/09/22 07:42

ありがとうございます！パラメーターは自分でやるのですが、書き方が載っていなくて。 1つで良いのでURLのあとにつける付け方を教えていただけないでしょうか？

退会済みユーザー

2017/09/22 08:13

回答に記述したスクリプトに「controls」を追記しました。必要なパラメータも同様に追加していけばOKです。

退会済みユーザー

2017/09/22 09:54

ありがとうございます！追記していただいた方法でやってみたのですが、パラメータがURLに付かないのですが、どこか記述が間違ってますでしょうか？ご協力のほどよろしくお願い致します泣

退会済みユーザー

2017/09/22 10:08

記述が漏れていたので、修正しました。「追記ここから」〜「追記ここまで」の付近を確認してみてください

退会済みユーザー

2017/09/22 14:37

教えていただいた方法でできました！ Tak_matzさんの回答をベストアンサーとさせていただきます！本当にありがとうございます！フォローもさせて頂きましたので、これからもどうぞよろしくお願い致します！

行動規範の内容に同意します

実際に使用されているサイトをiPhone iOS10のサファリで見てみましたが、
画像をクリックしても自動再生はされませんでした。
一度クリックするとYoutubeのサムネイルに変わり、更にクリックすると全画面で再生されました。
スマートフォン（iPhone)はYoutubeなどを独自のインターフェースで全画面再生するので
考え方を変えるよ良いかもしれませんね。

投稿2017/09/22 04:16