<video-placeholder>

Prettier embeds for flashy sites

Here's the story: you create a a good looking website and want to insert a few embeds from Vimeo.
   Now you have a semi-good looking, and slower¹, website.

This custom element for the web makes it easy to use your own placeholders while lazy-loading the 3rd-party content.

Here it is. Try to click it. You can also use the keyboard to focus and press enter.

How to use

Include the required script and css files:

<link href="video-placeholder.css" rel="stylesheet">
<script src="video-placeholder.js"></script>

Now you can use it anywhere, like this:

<video-placeholder>
  <button is="video-placeholder-front">
    <img src="https://i.imgur.com/CXmwG8G.jpg">
  </button>
  <template>
    <iframe src="https://player.vimeo.com/video/108194249"></iframe>
  </template>
</video-placeholder>

Warning: if your browser does not support custom elements, please include a polyfill. There's also an optional video-placeholder-fallback.js version that'll leave the embeds visible. But then you might as well not use this.

API

The <button is="video-placeholder-front"> element is used as the placeholder's front. You can put anything you want inside.

The <template> element is used to hide the thing you want to reveal until the element is opened. Also here you can put anything you want.

You can open it by clicking it or setting the attribute "open": <video-placeholder open></video-placeholder>

Please check the source code here as well for examples…

If an open attribute is present on the <video-element>, the element is considered opened. Otherwise and by default it will be closed, meaning only the front is visible.

When opened, whatever is put inside the <template> element will be revealed.

Since this is a custom element, you can also open and close it with open web APIs:

var el = document.querySelector('video-placeholder')
el.setAttribute('open', true)

To close it again, remove the attribute:

el.removeAttribute('open') 

To test, open your browser console and try the examples. Notice how first video-placeholder on this page opened? Well, unless you already opened it yourself already.

Example: close when a video finishes

You could listen for a video to finish playing and then close video-placeholder.

var el = document.querySelector('video-placeholder')
var video = el.querySelector('video')
video.addEventListener('ended', () => {
  el.removeAttribute('open')
})

Styling

By default, <video-placeholder> elements will be styled as a 16:9 flexible box. Images will be scaled to fit as well.

Should you want to overwrite the ratio, you can do this:

video-placeholder::after {
  /* Change to 4:3 (yes, not 3:4) format */
  padding-top: 75%; /* fallback without calc */
  padding-top: calc(3 / 4 * 100%);
}

The front can be styled however you like. It is not limited to a single image. As long as you have one <button is="video-placeholder-front"> element.

You could insert an image here. Or a play button. No matter what you insert, when you tap it, it will be replaced with your embed.

And this example is open by default: <video-placeholder open>.

See more (or less) on https://github.com/oskarrough/video-placeholder.

        ¹ on this site, with a fast wifi, we're talking 3 seconds faster!