@iantomarcello/skippable-video v1.0.0
\
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.
1 year ago