我怎么能包含一个具有自动高度的 child div -- Jwplayer

Question

当Jwplayer初始化时，他们注入了一个class和

的css

.jwplayer.jw-flag-aspect-mode {
  height: auto !important;
}

我的密码是

<div style="height: 80vh; width: 100%">
  <div style="height: 90%; width: 100%;>
    <div style="height: 100%; width: 100%;>
      <!-- JwPlayer here -->
      <div id="sample-video"></div>
    </div>
  </div>
  <div style="height: 10%; width: 100%;>
    <!-- actions bar here -->
  </div>
</div>

<script type="text/javascript">
  //psuedo code
  jwplayer('#sample-video").setup({
    sources: sources,
    autostart:true,
    width: '100%'
  });
</script>

问题是，当 jwplayer 注入他们自己的 css 时，他们会覆盖高度，即使我手动设置它内联或通过他们的设置使用上面提到的 class。

这反过来会导致视频播放器忽略下面的 parent 和溢出。如果我可以将 height: auto 更改为 height: 100%;，那么我的预期行为是正确的。

我已经尝试了 here 中的所有答案，并且所有答案都列在 jwplayer 的支持站点上。

Answer 1

因为这看起来更像是一个答案而不是评论：

您可能不介意 height:auto!important 也可以使用：

.jwplayer.jw-flag-aspect-mode {
    min-height:100%;
    max-height:100%;
}

在其中设置值以限制元素所需的固定或非固定高度值

Answer 2

设置高度的 jwplayer 设置选项有效。如果明确设置，它将保持 100%。

jwplayer('div').setup({
    height: 100%,
    width: 100%
});

运行 ~~this Snippet~~ Plunker 完全显示并调整大小 window，它完全响应并且不会超过 [=27 的高度=]它是容器.

PLUNKER

~~##SNIPPET~~

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JW Auto Height</title>
<script src="http://p.jwpcdn.com/6/12/jwplayer.js?"></script>
<style></style>
</head>

<body>
<!-- div is 80% height of this screen -->
<div style="height: 80vh; width: 100%; outline: 5px dotted red;">
  <!-- section is 90% height of div -->
  <section style="height: 90%; width: 100%; outline: 3px dashed blue;">
    <!-- main is 100% height of section -->
    <main style="height: 100%; width: 100%; outline: 1px solid black;">
     <!-- jw is 100% height of main -->
      <div id="jw"></div>
      
    </main>
  </section>
  <!-- nav is 10% height of div -->
  <nav style="height: 10%; width: 100%; outline: 2px solid grey; background: grey"></nav>
</div>
<div style="margin: 30px auto;">This is 20% of the screen's height</div>
<script>
//Real code

jwplayer("jw").setup({ 
 sources: [{
  file: "http://glvid.s3.amazonaws.com/jwp/test/3clox.mp4"
 }], 
  width: "100%",  
  height: "100%"  
});  



</script>
</body>
</html>

我怎么能包含一个具有自动高度的 child div -- Jwplayer

How could I contain a child div that has a height auto -- Jwplayer

javascript

jquery

css

jwplayer