我如何包含一个具有自动高度的子div-Jwplayer

Stephen C 发表于 Dev

斯蒂芬·C

初始化Jwplayer时，他们注入具有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时，即使我手动内联设置或通过上述类的设置对其进行设置，它们也会覆盖高度。

反过来，这将导致视频播放器无视父级，并在下面溢出。如果我可以将height：auto更改为height：100％;，那么我的预期行为是正确的。

我在这里尝试了所有答案，并且在jwplayer的支持站点上列出了所有答案。

zer00ne

设置height的jwplayer设置选项有效。如果明确设置，它将保持100％。

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

跑 ~~这个片段~~柱塞将完全显示并调整窗口大小，它具有充分的响应能力，并且不会超出其容器的高度。

朋克

~~## 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>