I recommend not to host the video files on your web server, but to upload them to YouTube and only embed the YouTube link on your web page. You can even define that your videos won't show up on searches, but are only served when using the link (from your website).
The reason is that these videos add significant load to your web server and bandwidth. And if something goes wrong (like providing the wrong codec), then your users won't see any video at all.
But if you really want to do it, you can even take YouTube as measurement. Upload an HD video and then download the various videos that YouTube has generated from that source.
I use this tool, but there may be others for different browsers:
You will see that YouTube offers a combination of different resolutions and different codecs. There is quite a complex logic behind which files to serve to which browsers. For ex. a small resolution will be served to mobile phones, but a bigger one to desktops depending on their screen resolution. Older browsers may need one codec, whereas modern ones accept others. YouTube does all that logic for you. But if you want to host the videos by yourself, you have to implement that logic as well.
You need then a tool like ffmpeg to convert your videos to these different formats and resolutions. Or, if you are lazy, just use the videos that you downloaded from YouTube, since they have the formats that you want.
Finally, you have to embed these videos on your web page. Here's the HTML video tag that you have to use. It's the new HTML5 standard, so older browsers don't support it.
As you have seen, these steps may mean a lot of work. That's why uploading to YouTube and embedding that link to your web page is the better choice.
Sorry that I didn't cover these steps in detail. This is just an overview.