スマホ向けサイトでYouTubeを埋め込む場合、iPhoneではプレーヤーをタップする形でないと動画を再生することができません.
そこで今回は、ボタンをタップしてYouTubeを再生することができないか試してみました。
サンプルコード
ボタンと同じサイズで透過したプレーヤーをボタンに重ねて配置することで、タップして動画を再生させることができました。
HTML
iPhoneの場合はaタグがYouTubeのプレーヤーに置き換わります。
<div class="btn-wrapper"> <div class="btn">動画を見る</div> <a href="https://www.youtube.com/watch?v=_o4eGTy4atk" id="movie"></a> </div>
CSS
.btn-wrapper {
position: relative;
width: 200px;
margin: 20px auto;
overflow: hidden;
}
.btn {
border: #999999 1px solid;
border-radius: 5px;
padding: 10px;
text-align: center;
background: #cccccc;
}
#movie {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
/* プレーヤーのタイトル部分をタップするとYouTubeのページへ遷移してしまうので調整 */
iframe#movie {
top: -80px;
height: 200px;
}
JavaScript
// ユーザーエージェントでの判別用
var ua = navigator.userAgent.toLowerCase();
var isiPhone = (ua.indexOf('iphone') > -1);
var isAndroid = (ua.indexOf('android') > -1) && (ua.indexOf('mobile') > -1);
// 埋め込む場所
var ytArea = 'movie';
// 埋め込むYouTube ID
var ytID = '_o4eGTy4atk';
// iPhoneの場合はプレーヤーを埋め込む
if(isiPhone) {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(ytArea, {
videoId: ytID
});
}
// Androidの場合はそのままページ遷移
} else if(isAndroid) {
}
iPhoneの場合は別画面で再生され、Androidの場合はYouTubeのページへ遷移するかアプリで開くかを選択するようになります。
ボタンクリックでYouTubeを再生するデモページ
周佐です。
お返事大変ありがとうございます！！
何度も質問してすみませんでした、、
プレイヤーの位置の問題だったんですね。
透過せずに値だけ変えても変わらなかったので、上手くいきませんでしたが
半透明にしたらよくわかりました！
分かりやすい解説で本当にありがとうございます！
もっと勉強して理解を深めたいと思います。
今後もこちらのサイトを参考にコードを学んでいきたいと思いますので、
ブログこれからも頑張ってください！
PS.宝石の国凄く好きです！原作も読んでしまいました！三月のライオンの茅野さんがとても好きです。
周佐さん
上手く実装できたようで良かったです！
励みのお言葉もありがとうございます。
PS. 3月のライオンもいいですよね！
周佐です。
迅速なご連絡誠にありがとうございます。
JavaScriptが原因だったのですね。。
ご教授頂いた個所を追加しましたら、上手くいきました！
ほんとにありがとうございました！
もう一つお伺いしたいのですが、スマートフォンでの動画再生後、
途中で再生を中断し、もう一度動画をタップすると再生はされず、更新すると
動画が再生されるのを、タップするたびに再生するような形にするとしたらどのような
記述が必要になるでしょうか？
http://www.theqcamera.com/
こんな感じの再生ができるような形にしようと思い、参考サイトを巡っていまして、
こちらのサイトを拝見した次第でした。
もしお手隙の時にでもまたご教授頂けたら大変助かります。
PS.今期のアニメも茅野さん沢山出てて欠かさず見てます！
周佐さん
コメントありがとうございます。
> もう一つお伺いしたいのですが、スマートフォンでの動画再生後、
> 途中で再生を中断し、もう一度動画をタップすると再生はされず、更新すると
> 動画が再生されるのを、タップするたびに再生するような形にするとしたらどのような
> 記述が必要になるでしょうか？
こちらデモページを拝見しましたが、ボタンとプレーヤーの中央部分がずれているためかと思います。
デモページを拝借して、プレーヤー部分を半透明にしてみました。
https://cly7796.net/blog/sample/play-youtube-when-you-click-button-on-smartphone/index3.html
こちらをiPhoneで確認いただくと、ボタンとプレーヤー中央の再生アイコンがずれているのがわかるかと思います。
最初の再生(プレーヤーのアイコンが赤い時)はプレーヤーのどこをタップしても再生ができるのですが、中断して再度再生する場合(プレーヤーのアイコンがグレーの時)は中央のアイコン部分をタップしないと再生できません。
そのため、プレーヤーのアイコンがボタンと重なるようにCSSで調整すれば対応可能かと思います。
https://cly7796.net/blog/sample/play-youtube-when-you-click-button-on-smartphone/index4.html
PS. 今期ですと宝石の国のダイヤモンドが好きです。
突然のご連絡で失礼いたします。
こちらのサイトを参考にスマートフォンでのYouTube再生をボタンクリックで再生する
記事を拝見し、ソースを拝見し、テストをcly7796.net様のように試してみたのですが、
こちらのでもページをスマートフォンで拝見しますと、youtubeアプリが開かず、ブラウザ内で正常に
再生されるのですが、私も同じソースででもページを作成してみたのですが、
私が作成した方はyoutubeアプリで開かれてしまい、同じ動作になりませんでした。
突然のご連絡と、ソースコードの拝借など失礼とは思いましたが、なぜ違う動作になってしまうのか、
疑問を解決したくご連絡差し上げた次第でございます。
何卒お知恵をお貸しいただけませんでしょうか？
お返事いただけますと大変助かります。
何卒宜しくお願い致します。
PS.私も茅野愛衣さん大好きです。
周佐優花さん
コメントありがとうございます。
この記事で行っている実装方法ですが、Androidの場合はaタグでYouTubeへのリンク、
iPhoneの場合は透過したプレーヤー(iframe)をボタンに重ねて、プレーヤーをタップさせる実装を行っています。
以下にサンプルを作成しましたが、プレーヤーを半透明にするとイメージしやすいと思います。
https://cly7796.net/blog/sample/play-youtube-when-you-click-button-on-smartphone/index2.html
こちらをiPhoneで確認いただくと、ボタンの上に半透明のプレーヤーが重なっているのが確認できると思います。
このプレーヤーをタップさせることで、ボタンクリックでブラウザ内で再生されているように見せています。
JavaScriptを使ってiPhoneの時にaタグをプレーヤーに置き換えるようにしているのですが、
いただいたデモページを拝見すると、そのJavaScriptが抜けているようです。
記事内のJavaScriptの記述を、bodyの閉じタグの直前に追加いただければ
問題は解消できるのではないかと思います。
(上記サンプルページのbodyの閉じタグの直前にある「sample.js」がこれになります。)
PS. 茅野さん可愛いですよね！
僕も大好きです。