What is the best way to confine a child div with a dynamic height?

Upon initialization of Jwplayer, a class is injected with the following CSS:

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

Here's my code snippet:

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

The issue arises when Jwplayer injects its own CSS, overriding manually set heights, even when using inline styles or their setup method with the specified class.

https://i.sstatic.net/W785X.jpg

This causes the video player to overflow below the parent container. Changing height: auto to height: 100%; would correct this behavior as expected.

I've explored various solutions provided here and on Jwplayer's support site without success.

javascriptjquerycssjwplayer

Answer №1

By adjusting the jwplayer setup options for height, it is possible to maintain a 100% setting if explicitly specified.

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

To see the responsive nature of this configuration, run the code in full display on Plunker and resize the window. The video player will adjust to fit within the height of its 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>

Answer №2

since it appears more like a solution rather than a response:

You can also include height:auto!important along with:

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

This allows you to define the specific fixed or unfixed height values for your element

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best approach for updating data in a v-data-table dynamically?

I'm currently working on a node and electron application that utilizes vuetify to create a table (v-data-table) fetching data from an oracle database. The issue I'm facing is that even though the data changes based on the input value, the table f ...

javascriptvue.jsvuetify.js

Issue with the alphabetical ordering of subpages

My PageSidebar.js component lists child pages alphabetically. https://i.sstatic.net/DZro1.png However, when I navigate to a child page, the alphabetical order is not maintained. https://i.sstatic.net/fRVgO.png I've tried multiple solutions but hav ...

javascriptreactjsgatsby

When using the `justify-content: flex-end` property, the `overflow: auto

I'm attempting to align elements to the right within a container and hide any overflowed elements while still allowing them to be accessed via a scrollbar. However, I've noticed that the scrollbar disappears when using justify-content: flex-end. ...

htmlcssflexbox

Looking for assistance in minimizing the gap between the banner and content on my Weebly website

Currently, I am utilizing Weebly templates and working with the CSS files for my website located at www.zxentest.weebly.com. I am seeking assistance in reducing the space between the yellow banner and the faint line on either side, as well as decreasing t ...

htmlcssreduceweebly

Understanding the Typescript Type for a JSON Schema Object

When working with JSON-schema objects in typescript, is there a specific type that should be associated with them? I currently have a method within my class that validates whether its members adhere to the dynamic json schema schema. This is how I am doing ...

javascriptjsontypescript

What is the best way to replace a regular expression in JavaScript?

I've recently been exploring the functionalities of MathJax, a Javascript library that enables the use of LaTex and similar mathematical markup languages within HTML. However, when attempting to incorporate it into my Javascript code, I encountered so ...

javascriptlatex

Is it possible to enable tab navigation for a button located within a div when the div is in focus?

I have a component set up like this: (Check out the Code Sandbox example here: https://codesandbox.io/s/boring-platform-1ry6b2?file=/src/App.js) https://i.sstatic.net/ZuxdL.png The section highlighted in green is a div. Here is the code snippet: import { ...

javascriptcssreactjs

Options for managing URLs with jQuery

I've been working with a jQuery user interface component called aciTree, which is a tree list that uses Ajax as the data source. When I provide a URL that returns JSON, everything functions properly. However, I need to generate the JSON dynamically an ...

javascriptjqueryajaxjson

Engage in a Play app featuring AngularJS frontend navigation

Currently, I am using the Play Framework to develop a REST service and I would like the front end to be built with Angularjs in order to make rest calls. I have configured a route provider as follows: angular.module("getAbscencePlans", ["getAbscencePlans. ...

javascriptangularjsplayframework-2.0

Sending the complete data from an HTML table to a web method

Is there a way to pass the data from a dynamically generated HTML table grid to a web method using jQuery AJAX? The table grid creates multiple rows on button click at runtime, and I need to send the entire table data. Please refer to the following snaps ...

javascriptjqueryhtmlasp.net

Dynamically select checkbox groups based on items already listed in a textarea

Hello! Would you be able to review this example and provide guidance on how I can use jQuery to dynamically select the checkboxes that have the same text as in the textarea below? <br /> <br /> Default Items From Database <br /> < ...

javascriptjquerycheckbox

Delay in form submission

I am attempting to auto-submit a form with its value after 10 seconds. I am having trouble incorporating a setTimeout function with the submit action. setTimeout(function() { $('#FrmID').submit(); }, 10000); $(document).ready(function() { ...

phpjqueryajax

Ensure alignment of gradients between two divs, even if their widths vary

Among my collection of 10 inline divs, each one boasts a unique width and color gradient. While the 45-degree lines are uniform across all the divs, is there a way to ensure that these gradients match seamlessly? I've shared my CSS code snippet below ...

htmlcssgradientrepeating-linear-gradient

There was an issue with the Weather API: {"cod":"400","message":"{vlat} is not a valid floating point number

I have been working on my local weather app project and struggling to retrieve the API coordinates. Here is the link I am using from Open Weather Map: http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'& ...

jqueryjson

Tips for Concealing jQuery Sub-Menus(ddsmoothmenu)

Learning jQuery has been a challenge for me, as the syntax feels like a foreign language even though I have experience with JavaScript. Despite this, I was able to successfully implement this menu in the header of my asp.net masterpage. I also managed to l ...

asp.netjavascriptjqueryasp.net-ajaxmaster-pages

Dealing with req.params.url that includes "://": Best practices

Currently, I am in the process of developing a program utilizing ExpressJS. One of the key features is that the user should have the ability to submit a URL. However, I am encountering a challenge. It seems that the system is not functioning correctly beca ...

javascriptnode.jsexpress

Exploring the process of sending an array of data through FormData using React Native

Trying to figure out how to send a list of data in react-native using form_data. Currently, it is only posting the first data item. How can I update all the data items at once? My Data: var data = ["person_1", "person_2", "person_3"]; My Code: ...

javascriptreactjsreact-nativemultipartform-dataform-data

Determine selected option in Radio Button

FORM : <form id="approvalPenambahanUserInt" name="approvalPenambahanUserInt" action="" method="post"> <div class="form-group"> <div class="col-sm-12"> <label for= ...

javascripthtmljquery

Safari displays the contents of JSON files instead of automatically downloading them

I am facing an issue with a JavaScript code that generates a link to download a JSON file. The link is structured like this: <a href="data:text/json;charset=utf-8,..." download="foo.json">download</a> While the link works perfectly in Chrome ...

javascriptjsonsafari

Displaying an RSS feed inside a designated div element

Seeking assistance from all you wonderful individuals for what seems to be a simple problem. Here is the HTML code I am working with: <div id="rssfeed"></div> Along with JavaScript that includes the FeedEK plugin $(document).ready(function ...

javascriptjqueryajaxxml