HTML5 Responsive Breite Video macht Eltern Container Höhe in IE11 erweitert

Question

Ich versuche, ein Layout von HTML5 Videos in einem 2 x X-Layout (wo X ist eine beliebige Anzahl von Zeilen) zu bekommen. Dies ist unglücklicherweise in IE11 problematisch, wobei die Höhe des übergeordneten Containers auf der Höhe bleibt, die es wäre, wenn ich keine Breite auf dem Video angegeben hätte, und ich finde keinen Weg darum herum.

Beispielcode um das Problem zu reproduzieren:

body { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -moz-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-direction: normal; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-flex-direction: column; 
 
    -moz-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    position: relative; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.sfSite-section { 
 
    background-color: #fff; 
 
    border-bottom: 5px solid red; 
 
    padding: 30px 100px; 
 
    text-align: center; 
 
} 
 
h1 { 
 
    font-size: 48px; 
 
    line-height: 48px; 
 
    margin-bottom: 20px; 
 
} 
 
p { 
 
    font-size: 14px; 
 
    margin-bottom: 10px; 
 
    padding: 0; 
 
} 
 
.sfVideoList { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -moz-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex-wrap: wrap; 
 
    -moz-flex-wrap: wrap; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    -webkit-justify-content: center; 
 
    -moz-justify-content: center; 
 
    justify-content: center; 
 
} 
 
.sfVideoList-videoContainer { 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 1 auto; 
 
    -moz-box-flex: 0; 
 
    -moz-flex: 0 1 auto; 
 
    -ms-flex: 0 1 auto; 
 
    flex: 0 1 auto; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -moz-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    padding: 10px; 
 
    width: 50%; 
 
} 
 
.sfVideoList-videoClose { 
 
    color: #fff; 
 
    cursor: pointer; 
 
    display: none; 
 
    font-size: 4.8rem; 
 
    line-height: 2.6rem; 
 
    padding: 10px; 
 
    position: absolute; 
 
    right: 0; 
 
    text-shadow: 0 0 5px #2a2c35; 
 
    top: 0; 
 
} 
 
.sfVideoList-video { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<main class="sfSite-section" role="main"> 
 
    <h1>Welcome</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque et tellus sit amet iaculis. Donec sodales laoreet ipsum, vitae ultrices sapien viverra id. Mauris suscipit convallis metus tempor suscipit. Morbi ac dignissim erat. Nulla fringilla 
 
    quam nisl, convallis auctor justo aliquam eget. Aliquam vitae urna tellus. Duis consectetur, nisl ut gravida efficitur, nisl ex auctor orci, nec luctus felis urna at tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
 
    himenaeos. Aenean id porta eros. Phasellus ut metus at lectus efficitur egestas eu sit amet ex. Sed accumsan id leo eget mollis. Nulla facilisi.</p> 
 
    <p>Cras efficitur eros urna, sit amet finibus diam mollis et. Suspendisse eros tellus, mollis eu facilisis quis, placerat non magna. Vestibulum eget dictum leo. Phasellus mauris velit, suscipit in ipsum sed, porta s agittis massa. Curabitur diam nisi, 
 
    consectetur eu mollis in, sodales sit amet quam. Cras cursus eu metus nec luctus. Ut posuere quis arcu vel eleifend.</p> 
 

 
    <div class="sfVideoList"> 
 
    <div class="sfVideoList-videoContainer"> 
 
     <i class="fa fa-times sfVideoList-videoClose" aria-hidden="true"></i> 
 
     <video class="sfVideoList-video" controls> 
 
     <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">Your browser does not support HTML5 video. 
 
     </video> 
 
    </div> 
 

 
    <div class="sfVideoList-videoContainer"> 
 
     <i class="fa fa-times sfVideoList-videoClose" aria-hidden="true"></i> 
 
     <video class="sfVideoList-video" controls> 
 
     <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">Your browser does not support HTML5 video. 
 
     </video> 
 
    </div> 
 
    </div> 
 
</main>

Ich habe versucht display:flex auf dem Behälter verwendet wird, habe ich versucht, display:inline-block auf den Videos mit, ich habe versucht, height:auto Einstellung , alles ohne Erfolg und jetzt habe ich keine Ideen mehr. Dies scheint nur bei großen Videos zu passieren. Alle Vorschläge willkommen!

Answer 1

Ich fand, dass dies nicht auf Videos beschränkt ist, sondern auch auf Bilder passiert (ich versuchte Taktik zu ändern und hatte das gleiche Problem). Wenn Sie ein wenig mehr tun, um Videos mit weniger Spezifität googeln, stolperte ich über diesen codepen: https://codepen.io/leonderijke/pen/nxFhH

Ganz einfach, die Antwort ist die height des Behälters 0 einzustellen, während die padding-bottom Einstellung der korrekten% für das Image der Aspekt zu sein Verhältnis.

Hier ist der Code für die codepen, nur für den Fall:

.container { 
 
    width: 600px; 
 
} 
 

 
.media { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
     -ms-flex-direction: column; 
 
      flex-direction: column; 
 
    width: 50%; 
 
} 
 

 
.media-body { 
 
    border: 1px solid black; 
 
} 
 

 
.media-image { 
 
    height: 0; 
 
    padding-bottom: 56%; /* (Width/Height * 100) */ 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    vertical-align: middle; 
 
}

<div class="container"> 
 
    <div class="media"> 
 
    <!-- 
 
     This div will get sized based on its children. Necessary, because Firefox doesn't handle the padded box (.media-image) very well as a flex-item. 
 
    --> 
 
    <div> 
 
     <div class="media-image"> 
 
     <img src="//placehold.it/600x336.png"/> 
 
     </div> 
 
    </div> 
 
    <div class="media-body"> 
 
     <h3>The title</h3> 
 
     <p> 
 
     Just some filler text because Lorum Ipsum is too boring. You know, reasons. 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Weil meine Bilder jede Breite oder Höhe sein könnte, ich leider die CSS hier mit Hilfe von JavaScript zu generieren hatte. Ich habe sicher, dies nur auf IE11 geschehen benötigt allerdings wie man sehen kann:

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode; 
 

 
$(function() { 
 
    if (isIE11) { 
 
    $('.sfVideoList-videoPreviewImg').each(function() { 
 
     var width = $(this).outerWidth(); 
 
     var percentage = (($(this).outerHeight()/width) * 100) + '%'; 
 

 
     $(this).css('width', '100%').parent().css({ 
 
     'height': '0px', 
 
     'padding-bottom': percentage 
 
     }); 
 
     $(this).closest('.sfVideoList').css('height', 'auto'); 
 
    }); 
 
    } 
 
});

body { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -moz-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-direction: normal; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-flex-direction: column; 
 
    -moz-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    position: relative; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.sfSite-section { 
 
    background-color: #fff; 
 
    border-bottom: 5px solid red; 
 
    padding: 30px 100px; 
 
    text-align: center; 
 
} 
 
h1 { 
 
    font-size: 48px; 
 
    line-height: 48px; 
 
    margin-bottom: 20px; 
 
} 
 
p { 
 
    font-size: 14px; 
 
    margin-bottom: 10px; 
 
    padding: 0; 
 
} 
 
.sfVideoList { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -moz-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex-wrap: wrap; 
 
    -moz-flex-wrap: wrap; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    -webkit-justify-content: center; 
 
    -moz-justify-content: center; 
 
    justify-content: center; 
 
} 
 
.sfVideoList-videoContainer { 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 1 auto; 
 
    -moz-box-flex: 0; 
 
    -moz-flex: 0 1 auto; 
 
    -ms-flex: 0 1 auto; 
 
    flex: 0 1 auto; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -moz-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    padding: 10px; 
 
    width: 50%; 
 
} 
 
.sfVideoList-videoPreview { 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 
.sfVideoList-videoPreview::before { 
 
    color: #fff; 
 
    content: "\f144"; 
 
    font: normal normal normal 3rem/1 FontAwesome; 
 
    left: 50%; 
 
    opacity: 0.75; 
 
    position: absolute; 
 
    text-shadow: 0px 0px 6px #2a2c35; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.sfVideoList-videoPreviewImg { 
 
    width: 100%; 
 
} 
 
.sfVideoList-videoScreen { 
 
    display: none; 
 
} 
 
.sfVideoList-videoClose { 
 
    color: #fff; 
 
    cursor: pointer; 
 
    display: none; 
 
    font-size: 4.8rem; 
 
    line-height: 2.6rem; 
 
    padding: 10px; 
 
    position: absolute; 
 
    right: 0; 
 
    text-shadow: 0 0 5px #2a2c35; 
 
    top: 0; 
 
} 
 
.sfVideoList-video { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
@media all and (-ms-high-contrast:none) { 
 
    .sfVideoList { 
 
    height: 0; 
 
    overflow: hidden; 
 
    } 
 

 
    .sfVideoList-videoPreviewImg { 
 
    width: auto; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<main class="sfSite-section" role="main"> 
 
    <h1>Welcome</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque et tellus sit amet iaculis. Donec sodales laoreet ipsum, vitae ultrices sapien viverra id. Mauris suscipit convallis metus tempor suscipit. Morbi ac dignissim erat. Nulla fringilla 
 
    quam nisl, convallis auctor justo aliquam eget. Aliquam vitae urna tellus. Duis consectetur, nisl ut gravida efficitur, nisl ex auctor orci, nec luctus felis urna at tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
 
    himenaeos. Aenean id porta eros. Phasellus ut metus at lectus efficitur egestas eu sit amet ex. Sed accumsan id leo eget mollis. Nulla facilisi.</p> 
 
    <p>Cras efficitur eros urna, sit amet finibus diam mollis et. Suspendisse eros tellus, mollis eu facilisis quis, placerat non magna. Vestibulum eget dictum leo. Phasellus mauris velit, suscipit in ipsum sed, porta s agittis massa. Curabitur diam nisi, 
 
    consectetur eu mollis in, sodales sit amet quam. Cras cursus eu metus nec luctus. Ut posuere quis arcu vel eleifend.</p> 
 

 
    <div class="sfVideoList"> 
 
    <div class="sfVideoList-videoContainer"> 
 

 
     <div class="sfVideoList-videoPreview"> 
 
     <img class="sfVideoList-videoPreviewImg" src="//placehold.it/600x336.png" /> 
 
     </div> 
 

 
     <div class="sfVideoList-videoScreen"> 
 
     <i class="fa fa-times sfVideoList-videoClose" aria-hidden="true"></i> 
 
     <video class="sfVideoList-video" controls> 
 
      <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">Your browser does not support HTML5 video. 
 
     </video> 
 
     </div> 
 
    </div> 
 

 
    <div class="sfVideoList-videoContainer"> 
 

 
     <div class="sfVideoList-videoPreview"> 
 
     <img class="sfVideoList-videoPreviewImg" src="//placehold.it/600x336.png" /> 
 
     </div> 
 

 

 
     <div class="sfVideoList-videoScreen"> 
 
     <i class="fa fa-times sfVideoList-videoClose" aria-hidden="true"></i> 
 
     <video class="sfVideoList-video" controls> 
 
      <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">Your browser does not support HTML5 video. 
 
     </video> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</main>