Need help with creating the control panel for my custom media player

1

The Grey control panel that will show the scroll, play and pause button is currently not showing up in my CSS/html.

Here is what I expect:

image
image1525×569 69.5 KB

Here is what I get:

image
image1920×955 11.1 KB

No control panel as you can see.

Here is the code I use to create the control panel:

.moviecontainer{

    width:1000px;
    min-height:600px;
    background:black;
    border-radius:9px;
    
}

.control-panel{
    background:grey;
    height:80px;
    width:1000px;
}

image
image1704×904 31.2 KB

Here is the link to my code:https://codepen.io/noblegas/pen/XWmRrgq

2

Hello there.

I think this will be useful to you: https://www.w3schools.com/tags/tag_video.asp

3

so you don’t think that the .moviecontainer div is necessary?

4

It is entirely up to what you are wanting to do with it. For the controls, it is not in the slightest bit related.

Have more of a go at developing it, and share the update, if you get stuck.

5

Of course. But if you were making a custom mp4 player, you wouldnt use the .moviecontainer div and just follow the documentation?

6

Which documentation are you referring to?

7

The documentation you linked me from w3school. Also the documentation from the developer.mozzilla site, the unofficial documentation page for javascript.

8

Again, it entirely depends on what you want to do. You could recreate the video player from that documentation. Or, you could just target some elements with CSS to change the styling.

With your code above, you will not get a video player, just by setting a div to have a class of moviecontainer.

With all of that documentation , you have plenty of info to get started.