Finding a quick/efficient way to utilize WebM videos as cover images with Pure CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Using Webm as cover images

**the ultimate goal here is to be able to use webm videos in place of static images when picking a cover image for a website **

Requirements, APIs, and Gems

this only uses pure CSS to accomplish the task, nothing special required.

To use

  1. require webmcover.css in html file
<link rel="stylesheet" type="text/css" href="webmcover.css">
  • contents of webmcover.css
#bgmotion {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
#bgmotion video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
  • place div in html file
<div id="bgmotion">
<video autoplay loop src="">

Reasons for this:

  • By enlarging the image, you can see the specs regarding the conversion to WebM:
    • Original Gif file was 13mb in size
    • WebM video file is 363k
    • 19.2:1 compression ratio
  • Considerable load time instantly becomes zero.
  • You can now utilize large, high resolution animations as cover images- with zero negative effects.