Determine the appropriate height of a video container based on its aspect ratio

Imagine a scenario where I have a service that either returns an error or a video URL to be played. If a video is present, React will display the video; if not, it shows the error message. I want to ensure that there is always a placeholder/error message with the same height across all devices as the video that should be displayed.

In simpler terms, I want to establish rules such as: if a 16:9 video is expected, then set the height of the error message placeholder equal to the height of the video in that specific screen size.

Is there a way to calculate this dynamically while maintaining responsiveness based on aspect ratio? Does this concept seem logical?

Appreciate any insights you can provide. Thank you!

javascriptcssreactjshtml5-videoaspect-ratio

Answer №1

To create a responsive design for your container based on aspect ratio, you can utilize the padding-bottom CSS technique. Simply divide the second number by the first and convert it to a percentage value:

1:1 = 100% 16:9 = 56.25% 4:3 = 75%

Learn more at https://css-tricks.com/aspect-ratio-boxes/

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

Ways to activate a function for jQuery selectable list items

I've been working on a code to implement selectable buttons similar to the demo on jquery ui(http://jqueryui.com/selectable/). I'm trying to trigger a function whenever an item is selected (Item 1, Item 2, etc). I've tried multiple approache ...

javascriptjqueryhtml

Steps for combining two collections into a single output in MongoDB with Node.js

My MongoDB collections consist of data that I need to merge using the $lookup operation. However, the result I get contains a nested array structure that is not ideal. I am looking for a solution to format the result as shown below: First collection locati ...

javascriptnode.jsmongodbcollections

results from the wikipedia API search

I am attempting to generate multiple div elements each containing at least 10 results from the Wikipedia API AJAX request. Although I believe my query is correct, I am encountering issues with initializing my values as they consistently end up as undefin ...

javascriptjqueryapiwikipedia

Creating a Dynamic Controller with Dynamic Parameters in AngularJS

For my project, I am using requirejs, angularamd, and ui.bootstrap. When working with a popup form, I utilize $uibModal from ui.bootstrap. However, I am facing an issue where I cannot pass a parameter "items" from resolve. How can I dynamically inject para ...

javascriptangularjsrequirejs

Tips for successfully transferring values from an onclick event in JavaScript to a jQuery function

I am encountering a challenge with an image that has an onclick function associated with it. <img id='1213' src='img/heart.png' onclick='heart(this.id)'> This particular function needs to be triggered : function heart ...

javascriptjqueryhtml

"Is it possible to conditionally render a component depending on the state in

One of the challenges I'm facing is customizing a filter icon from MaterialUI. My goal is to change its color to black when a checkmark is checked, and adjust its position accordingly. Additionally, when a box is checked, it should fill in setFilters. ...

javascriptcssreactjsmaterial-uijsx

Angularjs could not locate Firebase

I am creating an angularJS application and planning to implement Firebase for simple authentication. Within my index.html file, I have added: <script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script> ...

javascriptangularjsfirebasefirebasesimplelogin

Generating a clickable hyperlink within a b-table cell using Vue Bootstrap

When using the b-table component, I encounter an issue. <b-table responsive hover :items="myItems" :fields="myField"> My backend returns a URL within my items, and I want to display it in my template. <template slo ...

javascripttwitter-bootstrapvue.jsvuejs2bootstrap-vue

Can you explain the process of updating the state in Reactjs?

I am struggling to understand why the state updates in the React Developer Tools but not when I use console.log. See the code snippet below: const [values, setValues] = useState({ lastName: "", firstName: "", // more variabl ...

javascriptreactjsaxios

Error in Webpack ProvidePlugin when trying to access global variable (Module not found)

I'm relatively new to Webpack and I am facing an issue with my ProvidePlugin configuration not working as intended. Here is the code snippet from my file: App.js var App = function() { getSomething: function(size) {} }(); module.exports = App; ...

javascripttypescriptwebpack

Inject the code snippet from CodePen into a WordPress webpage

I have a WordPress page where I want to integrate the HTML, CSS and JS code from my Codepen project. The styling appears to be working correctly, but the JavaScript is not functioning as expected. You can view the page here: Could someone assist me in pr ...

javascripthtmlcsswordpresspost

Turn off the extra space inserted by DataTables

Help needed with centering table header text. <table class="table table-bordered table-hover center-all" id="dataTable"> <thead> <tr> <th scope="col" style="text-align: center">Nam ...

javascripthtmlcssdatatables

Encountering an Internal Server Error with the Fronitity framework when integrating WordPress and React

Exploring a new framework named Frontity proved to be promising at first. The initial try went smoothly, with my demo page up and running flawlessly by following these instructions. However, on the second compile attempt, I encountered numerous errors, no ...

node.jsreactjswordpresscompiler-errorsnpx

Sending the match to restricted access route

I'm currently facing an issue with my code for private routes that require authentication. For some reason, Match is not being passed down to the child component correctly. When I try to access Match in the child component through Private Route, it sh ...

reactjsreact-router

Unveiled Content and Jquery: Triggering with a Double Click

Despite similar questions being asked, I wanted to present my query in a more concise manner. To better illustrate my issue, I have replicated it on jsfiddle (link provided below). The jquery event I am dealing with is: $(document).ready(function () { ...

javascriptjquerysemantic-ui

Advancing in the Mozilla fashion

Having an issue with my progress bar design... When viewed in Chrome, the value of the progress bar appears in red due to CSS styling I applied... But when opened in Mozilla, it shows up as a dull grey color. progress[value] { width: 250px; height ...

htmlcss

Using npm to trigger the package.json file will activate both the harp and browser-sync applications

I am looking for a way to simultaneously start a harp.js server and run a browser-sync process. This setup works perfectly on Linux with the following package.json configuration: { "scripts": { "dev": "bash ./serve.sh" } } Here is the content of ...

javascriptnode.jsnpmbrowser-syncharp

Including item from ajax not within $.when function finished

function fetchData(){ return $.ajax({ url : 'URL1', data : { id : id }, type : 'GET', }); } function fetchItemData(item_id) { return $.ajax({ url: 'URL2', data: { item_id: it ...

javascriptjqueryajax

Unable to alter or eliminate the grey background using material-ui

Struggling with a React application that incorporates material-ui. Despite my efforts, I can't seem to get rid of an unwanted grey background in one section of the app. Attempted solutions: body { background-color: #ffffff !important; } * { b ...

cssreactjsmaterial-ui

Issue with cssText functionality in Firefox and Opera browsers causing unexpected behavior

Take a look at this code snippet: <!DOCTYPE html> <html> <body> <div id="mydiv">Sample Text</div> <script type="text/javascript> var md=document.getElementById("mydiv"); md.style.cssText="background-color:yellow !import ...

javascriptcss