videoタグにobject-fitをいれて切り抜きをしているのですが
IEだとobject-fit効かないと知り
object-fitを効かせてくれるfitie.jsを導入しました。
動画は問題なく自分の切り抜きたいサイズに切り抜けれたのですが
そのjsを入れると自動再生がオフになってしまいます。
どうすればobject-fit効かせ、かつ自動再生にすることができるでしょうか?
以下が私の記述の抜粋になります。
アドバイス何卒宜しくお願い致します。
HTML
1<head> 2 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 3 <script src="./js/fitie.js"></script> 4</head> 5 6<div> 7 <h4><img src="./img/contents_txt.png" alt="テキスト"></h4> 8 <video src="./img/movie/Snowfall.mp4" autoplay loop muted> 9</div>
css
1div{ 2 width: 50%; 3 height: 300px; 4 display:inline-block; 5 position: relative; 6} 7 8div h4{ 9 position: absolute; 10 bottom: 20px; 11 left: 20px; 12 z-index: 1; 13} 14 15div video{ 16 position: absolute; 17 z-index: 0; 18 left: 0; 19 top: 0; 20 width: 100%; 21 height: 100%; 22 object-fit: cover; 23}
試してみたこと
1:まったく同じ記述のままfitie.jsを外してみると自動再生はできる。しかしもちろんobject-fitは効かない
2:bodyの直前に置いてみても変化なし
3:動画自体の容量を最小にしてみる→再生されなかった
4:chrome/firefox/operaでは切り抜き・自動再生ともに問題なく動作しています
あなたの回答
tips
プレビュー