Having trouble populating a div with video content using ReactJS

The objective

Our goal is to replicate the layout of the home page from Meetup, with the video positioned beneath the navigation bar.

The challenge

When it comes to displaying videos within a div element, they can be tricky to control. While the aspect ratio remains intact, white spaces may appear around the video inside the div. Although object-fit is supported in 'traditional' HTML, attempts to implement it in React JS have been unsuccessful. How can we successfully fill a div with a video tag in React JS?

Here is the link to the CodeSandbox demonstrating this issue: Code Sandbox Link

We appreciate you taking the time to read through our query!

Answer №1

If I correctly grasped your objective, this solution might align with your needs:
https://codesandbox.io/s/react-video-sandbox-forked-8lkmj?file=/src/index.js

I essentially mimicked what meetup accomplishes.
Rather than using object-fit, we can employ basic CSS styling techniques to reach the desired outcome.

To eliminate the white spaces you mentioned, I adjusted the video wrapper element to occupy 100% of the parent's dimensions (both width and height) and then aligned the video in the center using flex-box.

In my modification of your codesandbox, I included explanatory comments for clarity.

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

How can I generate an HTML table by making JavaScript AJAX requests in a structured manner?

I'm new to JavaScript and currently working on dynamically creating a table. I've encountered an issue with the order of execution in my code. I understand that JavaScript doesn't execute sequentially, so I'm looking for a workaround. ...

What is the process for preventing the execution of APIs in Postman?

Currently, I am incorporating node js on my server side and I am in need of restricting the API from running on postman or any other platform besides a browser. Perhaps implementing a policy could be the solution, however, I am uncertain about how to go ...

Node.js server allows for accessing AJAX requests seamlessly

I need to send a parsed AST of JavaScript code to a server for processing, and then receive a list of completions back. However, when I log the AST to the client console before sending it, the structure appears like this: [ { "id":0, "type":"Program", "ch ...

Transforming the pen into a creative assortment of animated social media icons for top-notch production

My goal is to incorporate animated social media icons on my website using only CSS without any JavaScript. I came across a pen called "Yet Another Set of Animated Social Icons" that I'm attempting to modify. The issue at hand is that instead of the c ...

jQuery UI Drag and Drop problem with mouse positioning

I am currently working on a website that allows users to drag different "modules" (squares with information) from one location to another on the page using jQuery UI. However, I am facing an issue where when a module is dragged to a droppable zone, the sc ...

Issue: The property 'top' cannot be read as it is null

I'm trying to access the top of my footer, but I keep encountering this error message: Cannot read property 'top' of null Here is the HTML code: <footer class="footer" role="complementary" id="myfooter"> </footer> And in jQuer ...

Currently, I am leveraging the powerful combination of Supabase and Next.js in my project. However, I have encountered an issue where the create

Exploring Next.js and Supabase for the first time through a tutorial. Utilizing Supabase and Next.js together with details provided here. Encountering an issue while trying to replicate the code where createClientComponentClient() or the handleSubmit func ...

The issue with dynamic sizing in React and Tailwind is that it does not consistently work with arbitrary sizes. Some sizes do not appear properly, causing items to

In this code snippet, I am attempting to create a circle component of dynamically sized using html div and Tailwind CSS w-[diameter] & h-[diameter] attributes in a create-next-app@latest project. However, the circle fails to render properly with certa ...

Establish pathways based on a collection of values

I am seeking to establish language routes for my webpage, similar to this: import Component from '../src/component/component'; <Switch> <Route exact path="/es" component={(props) => <Component language="es" />}/> < ...

"Implement a feature that allows for infinite scrolling triggered by the height of

Looking for a unique solution to implement a load more or infinite scroll button that adjusts based on the height of a div. Imagine having a div with a height of 500px and content inside totaling 1000px. How can we display only the initial 500px of the div ...

Why does Angular Redirection initiate both my method and NgOnInit?

As a beginner in Angular, I am encountering an issue with Angular Redirection. Whenever I manually clear storage, the code executes ngOnInit, prompts an error, and redirects to the Login page as expected. However, when I attempt to do the same using the lo ...

How to fetch JSON data in React using HTTP requests

Entering the world of React technology as a beginner. I am wondering, how can I retrieve JSON data from an HTTP request? Referencing https://i.sstatic.net/MbX4i.png, I am able to successfully log the value of console.log(dataExt); from within the functio ...

An error occurred in scene.js at line 68: TypeError - Unable to access properties of an undefined object (specifically 'scene')

I'm attempting to display a animated model(.glb) in three.js but I am encountering the error mentioned above. When I place the LoadAnimatedModel function within the main method, it functions correctly. However, if I utilize it in a separate class, it ...

Entering text into a field / Inserting data into a MySQL database / Presenting

I am facing a challenge that I'm uncertain how to resolve. The issue lies with a textarea on my form that permits the user to input data in the following format: Windows XP Home and Professional<br />(32 and 64 bit) Windows 7 Home and Professi ...

Struggling to get JQuery timing events to function properly?

Encountering timing issues with the events in my self-made simon memory game. Experimented with setTimeout but struggling to figure out which events to time and the appropriate duration for them to be distinguishable. $('#play').click(function( ...

Tips for resetting the form input fields in Vue.js after the user has successfully submitted the form

I am facing an issue with my registration page. After the user enters some values and successfully submits the form, I want to clear all the fields. To achieve this, I am using a predefined function called reset() inside the script section. However, the ...

Is there a way to transform authorid into postid in order to retrieve author information and store it in my authorDocument array?

**Can you help me troubleshoot why this code is not functioning properly? ** let posts = await postsCollection.aggregate([ {$match: {_id: new ObjectID(id)}}, {$addFields: {authorId: { $toObjectId: "$author"}}}, {$lookup: {from: "user ...

What's the best way to establish a victorious player in a game of Tic

I've been struggling to find a solution for determining the winner using WinCombos. Is there a way to compare the elements in my winCombos array with the cells of a 3x3 tic tac toe board to identify the winner? var player1 = "X"; var player2 = "O"; ...

Text within cells is not wrapping onto a new line in an HTML table

Let me show you how it currently looks: https://i.sstatic.net/OeHRg.png The maximum width of the cell is working properly, but the text is not wrapping to a new line as expected. Instead, it overflows out of the cell. Here is the CSS applied to the tabl ...

Can someone explain why formik forms do not function within material-ui components?

Utilizing Axios to fetch data from an API for the input value, even with the enableReinitialize set to true, poses two challenges: The input does not update as intended The validation using Yup fails to work How can these issues be resolved? const va ...