Link to home
Create AccountLog in
Avatar of dgarofalo
dgarofaloFlag for United States of America

asked on

How do I create uniform dimensions for each row on the page?

How do I get the height of the video player to be the same on this page?

I tried the video tag and blox light class with the height rule, all to no avail.

Avatar of Scott Fell
Scott Fell
Flag of United States of America image

You need to start with one video on the page.Or do you mean when it plays?

There is an issue with uploading my screenshots and I am not able to view the page so having to edit here.

You need to remove the style="width:250;height250;"

Then add to your CSS add

video {
object-fit: cover; 

Open in new window

The problem you have is because some video title/ description are longer.
You can set a min-height to your box or limit the title and description length.
I have blurred the title/description and image
User generated image
Avatar of dgarofalo


Thank you for the input. I truncated the name of the videos with CSS. How do I fill in the space in red so all thumbnails are the same size? Thank you.User generated image
From the two files I have uploaded, you can see the video tags are the same size.

If you use
video { object-fit: cover; } in place of the inline style, that will get the videos to all be the same size.


I apologize for t his odd post, because I tried adding my screenshots in the comment instead of attached, the page errored out on me and I had to wait until now to post again.  I see from your current page you found my edited suggestion. Is this where you want to be or do you need to modify some more?
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
If you do want to keep the videos as is, and fill in the red space, just back the video background all the same color like gray or black.

video {
Thank you for the help!