Video.jsのIE8のFlash fallbackが効かなかった

簡単にページに動画を追加して、IE8とかの古いブラウザでも見れるようにしてくれるVideo.jsを使ったのですが、IE8でのFlash fallbackが効かず何も表示されないという現象がありました。

Video.jsのバージョンはv4.12.5です。

原因はvideoタグに設定したwidthとheightがautoになっていたことでした。レスポンシブ対応のためautoにしていたので、そこはさわれないので、IE8用にCSSを追加して対応しました。

modernizrを入れていましたので、videoタグに非対応のブラウザではno-videoクラスが付きます。それを使って次のルールを追加でOKでした。

.no-video .video-js {
width: 640px !important;
height: 360px !important;
}