Adjusting Video Controls

HTML & CSS
1

Thanks to @coothead, I was able to display my first-ever video on the website I am working on.

While that is really neat, the problem is that my video is only maybe 300px wide but the controls below it are as wide as the container at 640px wide. And this is a problem if someone is on a 320px smartphone!

The code I used is…

<video controls>
    <source src=''>
</video>

It looks like the problem is that the progress bar is too wide and doesn’t match the size of the actual video.

Btw, how do I determine the dimensions of my video? When I use Firefox’s Developer tool all it gives me is the parent video container size.

2

Can you you supply a link to the your actual video?

You can see an example of a working 300x400 video here…

https://codepen.io/coothead/full/KKwNVPZ

coothead

3

Actually, I don’t want to share the video since I’m not sure the people in the video would appreciate that! (Although I guess I could try and make a video using SnagIt like you did?)

At any rate, I figured out last night that I can style the video…

.videoFrame{
     width: 800px;
}

When I do that it solves the problem in that the video size and control size matches.

Of course, what I was complaining about is still on issue for mobile users.

Not sure how to do video and make it “responsive”?

4

In my example I used this…

video {
    display: block;
    width: 40%;    /* adjust value to suit  */
    height: auto;
    margin: auto;
    border: 1px solid #999;
 }

coothead

1 Like
5

@coothead,

Awesome! That helps a lot, and the controls are good enough for now. (I’m sure later on I can learn how to do fancier styling on these…)

6

Hi there UpstateLeafPeeper,

for yours try…

.videoFrame { 
    display: block;
    width: 100%;
    max-width:  50em; 
    height: auto;
 }

coothead

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.