VIDEOタグのレスポンシブについて

youtubeの動画を利用してフルスクリーンで画像が流れるように設定しています。
PC画面で実装しても問題なかったのですが、なぜが自分の携帯でチェックしたところ動画が反映されず
画面が真っ白でした。解決方法が見いだせなかったので助けてほしいです。
(別で、再生開始時間の設定方法もご存じであれば教えてください）

head内

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(function(){ $("#nav").click(function(){ $("#global_nav").slideToggle(); }); }); </script> <script type="text/javascript" src="js/jquery.tubular.1.0.js"></script> <script> $(function(){ if ( !((navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0 || navigator.userAgent.indexOf('Windows Phone') > 0) ) { var options = { videoId: 'ここにyoutubeのIDがはいります'}; $('#youtubebg').tubular(options); } }); </script>

　　以下「html」
<body>
<div id="youtubebg">
    <video id="videobg" autoplay loop muted>
      <source src="mov/white.mp4" type="video/mp4">
    </video>
</div>
</body>
　　

以下「css」
 #youtubebg {
  min-height: 100vh;
}
 #videobg {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -2;
}

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

回答2件

ベストアンサー

アドバイスのifを使わない方法がわかりませんでしたが、自分なりに再度調べてみると、スマホでは仕様上YouTube動画を自動再生させることができないということがわかりました。

なのでPCで実装しても問題なかったのにスマホでみると映らなかったということがわかりました。
（恐らく自作などの動画なら可能だったのかもしれませんが）代替え画像にて対応するしかないということが判明致しました。ありがとうございました。

投稿2020/06/27 14:37

退会済みユーザー

総合スコア0

js
1if ( !((navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0 || navigator.userAgent.indexOf('Windows Phone') > 0) ) {