What formats and settings to use for the video background on the site?

Question

Video

I want a background video on the site, I connect 2 formats mp4 and webm.

<!-- video -->
<div id="trailer" class="is_overlay">
    <video id="video" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
        <source src="/video/smoke.mp4"></source>
        <source src="/video/smoke.webm" type="video/webm"></source>
    </video>
</div>
<!-- /video -->

The question is what settings to set correctly in order to solve the following issues:
- the size should be as small as possible so that it loads less
- the format should be supported by most people
- the quality should be good so that it is not lost on large screens *
* On the last point, there may be any other solution to the problem?