HTML5応答幅のビデオはIE11で親コンテナの高さを拡大します

Question

HTML5ビデオのレイアウトをXレイアウト（Xは任意の数の行）で取得しようとしています。残念ながら、IE11では親コンテナの高さがビデオの幅を指定しなかった場合の高さにとどまっていて、私はその周りに道を見つけることができません。問題を再現する

例コード：

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>

私はコンテナにdisplay:flexを使用してみました、私はビデオの上display:inline-blockを使用してみました、私はheight:autoを設定しようとしましたすべて無駄に、今私はアイデアがありません。これは大規模なビデオでのみ発生するようです。すべての提案は歓迎！

Answer 1

私はこれがビデオのものに限られているのではなく、イメージにも起こっていることを知りました（私は戦術を変えようとしていて、同じ問題を抱えていました）。動画に少ない特異性でグーグルもう少しやってたとき、私はこのcodepenつまずい：https://codepen.io/leonderijke/pen/nxFhH

を簡単に言えば答えは画像の縦横の正しい％であることをpadding-bottomを設定しながら0にコンテナのheightを設定することです比。

はここだけの場合には、そのcodepenのためのコードです：

.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>

私のイメージは任意の幅または高さである可能性がありますので、私は悲しそうにJavaScriptを使用して、ここでCSSを生成する必要がありました。私はこれが唯一のあなたが見ることができるようにかかわらず、IE11で発生するために必要なことを確認しました：

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>