HTML5 video with SVG poster image as data URI

With SVG as a poster image you can set the correct proportions before the video has loaded.

<video preload="none" playsinline controls
 poster="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'' viewBox%3D'0 0 16 9'%2F%3E">
 <source src="video.webm" type='video/webm; codecs="vp9, opus"'>
 <source src="video.mp4" type="video/mp4">

Video source: Sintel, the Durian Open Movie Project

Page by: Walter Ebert