Video HTML doesn't work on Internet Explorer 11

Question

I try to display a full width video on a web page, but it doesn't work on IE 11.

html code :

<div id="containerVideo">

     <video id="video" autoplay><source src="assets/videos/video1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="assets/videos/video1.webm" type='video/webm; codecs="vp8, vorbis"' /> 
        <source src="assets/videos/video1.ogg" type='video/ogg"' />
        Video not supported. 
    </video>

</div> <!-- fin Container Video -->

CSS code :

#containerVideo {
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
    z-index: 1; 
}

#containerVideo video {
    min-width: 100%;
    min-height: 100%;
}

How can I solve this?

Answer 1

Audio and video must have the correct mime-type set on the server, according to Microsoft themselves .

You may have to include a codec in the mark-up.

There is a variety of alternative solutions out there, EXAMPLE .

I've battled this problem myself, and ended up just using a quite offensive poster (completely discriminating IE users, well deserved though), as the problem itself differs in many cases depending on eg file formats and codecs. My best tip is really to search around on Stackoverflow , filter by date, and find out how others went around the problem or solved it.

This is definitely a duplicate question, but good luck though.