スマートフォンのブラウザでYoutubeのiframeを全画面にせずに再生したい。

Question

タイトルの通りなのですが現在Webサイトを作成しておりまして、その中でYoutubeのiframeを埋め込んでいる箇所があります。
PCではYoutubeの埋め込み箇所のみを再生して、サイトの他の箇所を見ることができるのですが、
スマートフォン(タブレット)ではYoutubeを再生すると全画面になってしまい、他の箇所を見ることができません。
DOMをhiddenして、Youtubeをautoplayにしておくなど試しましたが、実現できませんでした。
最終的にYoutubeの音を聞きながらサイトの他を箇所を見れたら完璧です。

どなたか解決方法をご存知の方おられましたらご教授お願いします！
（「アプリだったらできるよ！」とかでも教えていただきたいです）

Answer 1

自分でネイティブアプリを作ったのでいいんだったら、
https://teratail.com/questions/36473
で紹介しているyoutube-ios-player-helperのYTPlayerViewを使えば、インラインでYoutubeの再生ができます。

詳しいインストール方法が書かれたリンクを再掲しておきます。
https://developers.google.com/youtube/v3/guides/ios_youtube_helper

Comments

[oh-sore-takesou]

ご教授ありがとうございます！
似た質問があったとは調査不足でした。
このやり方で一度挑戦してみます！

Answer 2

Safariは仕様で動画の再生はSafari独自の別ウィンドウが勝手に立ち上がってしまうので、難しいかと。

Comments

[oh-sore-takesou]

みたいですね、、
ありがとうございます！！

Answer 3

youtubeのapiを使ってカスタムプレイヤーを作りましょう。

Comments

[oh-sore-takesou]

ご教授ありがとうございます！

ドキュメント含め色々調べてみたのですが、ちょうど良い
スマートフォンでも最大化されないプレイヤーの例を見つけることができませんでした、、
もしご存知でしたら教えていただけるととても助かるのですが、ご存知ないでしょうか？

[harashow1701]

自分もスマホでの最大化を防止するようにしたくて実装しようとしたことがあります。結局、その案件自体が中断になってしまったので実装自体はしなかったのですが、調べている過程でできることは確認出来た記憶があります。ただ半年以上の前のことなので記憶が。。。

[oh-sore-takesou]

おお
心強いご意見ありがとうございます！
ちなみになんですが、Webブラウザ(chrome等)か独自のネイディブアプリだったか
覚えておられないでしょうか？

[harashow1701]

ウェブブラウザです！