<skippable-video>

Clients LOVE videos a fullscreen autoplay video despite my protests as frontend dev that browsers and 99.99% users to do not think that way.

So here's a component that lets users skip this video because clients do not seem to understand browsers do not autoplay videos. 🤷

Installation

Via the node

npm i skippable-video

Usage

<script type="module">
  import "skippable-video/skippable-video.js";
</script>

<style>
  skippable-video::part(play-button) {
    font-size: 2rem;
  }

  skippable-video::part(skip-button) {
    background-color: grey;
    color: white;
    text-transform: uppercase;
  }
</style>

<skippable-video src="./link/to/video.mp4" auto-destroy>
  <div slot="play-button">
    You'll this slotted if the video isn't autoplayed.
  </div>
  <div slot="skip-button">Yes, skip the video please</div>
</skippable-video>

Attributes

src: string href to video source, similar to HTMLVideoElement.src

auto-destroy: boolean If true, this component is automatically removed when the video has ended.

Slots

play-button: HTMLButtonElement Slot contents within the play button.

skip-button: HTMLButtonElement Slot contents within the skip button.

CSS Part

play-button Styles the play button.

skip-button Styles the skip button.

Events

remove Fires when the element is removed by the skip button or auto-destroy attribute.

Future plans

Plans to make this component a superset of HTMLVideoElement, i.e. primarily allowing native/original attributes like controls, width, height etc are automatically passed from the host component into the video element in the shadow dom.