Fix for Blurry HTML5 MP4(H.264) videos

MP4 video files are universally accepted by all major modern browsers.
Can I Use them? Yes, you can! And you should.
But! When embeding them into web pages with the HTML5 Video Element, if not configured properly, your MP4 videos will get a blurry behaviour here and there. And that's happening because this type of video and its encoding mode have some specific requirements.
Learning and following the simple recommendations below will help you meet those requirements and will generate you pixel-sharp MP4 videos for your web pages.

Recommendations:

  • Use standard 4:3 & 16:9 video sizes if possible.
  • Or use sizes that are multiple of 4:3 or 16:9 aspect ratios and also multiple of 16 (the encoder works in square blocks of 16x16 pixels).
    Formula for 4:3 aspect ratio:
    Width: 64*n / Height: 48*n
    Formula for 16:9 aspect ratio:
    Width: 256*n / Height: 144*n
    * Where n can be any natural number you want.
  • If you already have a custom size video and you want to quickly adjust it for a perfect look, try the 'MP4 Video size corrector' on this page.
Bonus trick: hack the gray tint in Chrome!
-webkit-filter: brightness(108.5%);

Use both .webm and .mp4 formats (.webm in front of .mp4).