1

When Jwplayer is initialized, they inject a class with the css of

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

My code is 

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

Problem is that when jwplayer injects their own css, they override the heights even if I set it manually inline or through their setup with the above mentioned class.

enter image description here

That in turn would cause the video player to disregard the parent and overflow below. If I can change height: auto to height: 100%;, then my expected behaviour is correct.

I've tried every answer in here and all of them listed on jwplayer's support site.

Community
  • 1
  • 1
Stephen C
  • 843
  • 2
  • 14
  • 28
  • It might mean something that `.jw-flag-aspect-mode` class gets added. Have you tried missing with the aspectratio, height, or stretching configuration options outlined in the [docs](https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/configuration-reference/#setup)? – zgood May 06 '16 at 17:13
  • I have tried the combinations of width height and aspectratio. I figured why they never mention the height in the docs is because they override it anyway. – Stephen C May 06 '16 at 17:24

2 Answers2

2

Setting the jwplayer setup options of height works. It will maintain 100% if explicitly set to do so.

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

Run this Snippet the Plunker in full display and resize the window, it is fully responsive and will not exceed the height of it's container.

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>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • It turns out one of the parent divs that the video was contained in, just needed a height: 100%; ! Thanks! – Stephen C May 06 '16 at 20:03
  • Your welcome, sir. If you have layout problems, I find it easier to fix things by using `outline`. It's like `border` but it doesn't take up any space which is perfect for debugging layouts. – zer00ne May 06 '16 at 20:56
1

since that looks more like an answer than a comment:

you may not mind height:auto!important by using as well:

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

where you set the values to constrain the desired fixed or not fixed height value(s) of your element

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129