【解決】object-fitをIE対応させようとしたら動画が動かなくなった
こんにちは！牧野です。
先日とある納品前のサイトをIEで動作確認していたところ、若干の表示崩れが…。
目立ったのが『object-fit』プロパティを使ってスタイリングした箇所でした。
使い方については師匠の記事で詳しくご紹介しています。
【便利CSSプロパティ｜object-fit】background-sizeと同じ挙動をimgタグに適用できる「object-fit」
画像が縦や横に伸び、「はいはい object-fit 〜、あなたが悪いんじゃなくて IE が悪いのよ〜、ごめんね〜」と、object-fit を IE に対応させるスクリプト『fitie.js』をインポート。
詳しくはこちら。
IEでもobject-fitを使えるようにするスクリプト「fitie」 | TechMemo
object-fit さんたちはすごく素直で偉いので、画像たちは即座に元の縦横比に戻ってくれて、一件落着。
もう一度、一通り見ておこう、とサイトにアクセスしたところ…。
動画が再生されない！？
あれ…？さっきまでちゃ〜んと動いてましたよね…？
Chrome は通常通り再生可能。
やっぱIE無理！！と半狂乱気味になりながら、いろんなサイトを見ていろんな動画形式で保存して表示させたり、サイズダウンを繰り返したり…。
かなりの時間を要し、やっと解決することができました！
object-fitをIE対応させようとしたら動画が動かなくなった
今回の事象の原因はタイトルの通り。
object-fitをIE対応させようとして fitie.js を使ったら、動画の自動再生が効かなくなってしまったのです。
例えば、object-fit を使って動画を親要素でマスクしたい、と思った時に、こんな風に記述すると思います。
HTML
<div class="object-fit"> <video src="example.mp4" muted autoplay loop></video> </div>
CSS
div.object-fit {
width: 800px;
height: 480px;
overflow: hidden;
}
div.object-fit video {
object-fit: cover;
width: 100%;
height: 100%;
}
このように記述したものが、fitie.js を使うと、IE で表示されたときだけこんな風に変わります。
HTML
<div class="object-fit"> <object> <video src="example.mp4" muted autoplay loop></video> </object> </div>
<object></object> という要素が、動画を囲むような形になり、ソースが変わってしまいます。
どうやらこれが良くないみたいなんですよね…。
問題の箇所から object-fit プロパティを削除してみたところ、正常に自動再生されました。
そのあと IE のみ該当箇所の object-fit を削除し、追加の CSS を書いて完了。
その Tips がこちら。
object-fitをCSSのみでIEにも対応してみる
fitie.js を紹介するサイトも様々あり、動画のトリミングも問題なさそうだったのですが、どういう訳か私が対応した時は不具合が起きてしまいました…。
もし、object-fit でトリミングした動画が IE で再生されない、という事象が起こったら、object-fit プロパティを削除してみてください！
イレギュラーな事象だったかもしれませんが、誰かのお役に立てれば幸いです。
ホームページの挙動がおかしい！また、思い通りにいかない！といったお悩みも、お問い合わせください。
