【解決】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

CSS

このように記述したものが、fitie.js を使うと、IE で表示されたときだけこんな風に変わります。

HTML

<object></object> という要素が、動画を囲むような形になり、ソースが変わってしまいます。
どうやらこれが良くないみたいなんですよね…。

問題の箇所から object-fit プロパティを削除してみたところ、正常に自動再生されました。
そのあと IE のみ該当箇所の object-fit を削除し、追加の CSS を書いて完了。
その Tips がこちら。
object-fitをCSSのみでIEにも対応してみる

fitie.js を紹介するサイトも様々あり、動画のトリミングも問題なさそうだったのですが、どういう訳か私が対応した時は不具合が起きてしまいました…。
もし、object-fit でトリミングした動画が IE で再生されない、という事象が起こったら、object-fit プロパティを削除してみてください!

イレギュラーな事象だったかもしれませんが、誰かのお役に立てれば幸いです。

ホームページの挙動がおかしい!また、思い通りにいかない!といったお悩みも、お問い合わせください。

牧野

この記事を書いた人: 牧野

太ったって言われるけどずっと太ってます。

あわせて読みたい