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'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' 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>

Video source: Sintel, the Durian Open Movie Project

Page by: Walter Ebert