Sure, no problem, I don't know that much but I'll try
width: 100%;
height: auto;
Here we define that the video element will fill the whole horizontal space available on the parent element and the height will adjust automatically. You´ll see this a lot when people try to make an element responsive to resizing.
max-height: 100%;
Since height is automatically set, I defined that the video height can be no bigger than 100% of the parent element size. If I'm not mistaken, this means that if the parent element have the same width as the video but a smaller height, the video will scale down by the height instead of overflowing and showing scroll bars.
position: relative;
top: 50%;
transform: translateY(-50%);
This is a tricky one. In some cases I found out that the scroll bar still appear, usually because a few pixels overflowed. When you transform an element the sizes are adjusted because of the movement, so I used this trick to eliminate the scroll bar on these rare cases.
Cheers
