HTML5响应宽度视频使IE11中的父容器高度得以扩展

时间：2017-01-05 15:28:27

标签： html css internet-explorer responsive-design html5-video

我正在尝试以2 x X布局（其中X是任意数量的行）获得HTML5视频的布局。不幸的是，这在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，一切都无济于事，现在我'我的想法。这似乎只发生在大型视频上。欢迎所有建议！

1 个答案:

答案 0 :(得分：0)

我发现这不仅限于视频，而且也适用于图像（我尝试改变策略并遇到同样的问题）。当我用更少的特异性对视频进行谷歌搜索时，我偶然发现了这个编码：https://codepen.io/leonderijke/pen/nxFhH

答案是将容器的height设置为0，同时将padding-bottom设置为图像宽高比的正确％。

以下是该代码的代码，以防万一：

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

相关问题
最新问题