poster-child
Advanced tools
Readme
poster-child
Logo by flipty.
poster-child is a teeny tiny niche script that lazy loads <video> element poster images. An image loaded by the poster attribute is used for videos that do not autoplay, but need an image placeholder to display without loading the entire video or even its metadata.
<video> element poster images?It's a niche thing, for sure, but it counts as a kind of media that can be data intensive. The web platform now supports native lazy loading for <img>, <picture>, and <iframe> elements, but not for poster images. This script allows you to do that, which can be useful if your website has a lot of non-autoplaying video content.
poster-child?Using poster-child effectively means following the proper markup pattern and then invoking the script. Let's start with the <video> markup you'll need to use.
<video> markupTo use poster-child, you'll need to use the following pattern in your <video> elements:
<!-- Adjust width/height/video sources as needed! -->
<video data-poster="poster.jpg" controls preload="none" width="320" height="240">
<source src="video.mp4" type="video/mp4">
</video>
The required parts of the markup for poster-child to function are:
data-poster attribute pointing to the placeholder image to be lazy loaded.controls element, since a video with a poster element should not be an autoplaying video.autoplay attribute under no circumstances. Even an autoplay attribute with a value of "false" will still autoplay video in some browsers.preload value of none to avoid loading any of the video up front.Any other use cases are not a fit for a poster element to be used, let alone poster-child.
There's a few ways you can use poster-child. You can install it from npm if you want:
npm i poster-child --save
Then in your application code, you can invoke it like so:
// posterChild is the only named export in the package:
import { posterChild } from "poster-child";
// Call poster-child without any options:
posterChild();
This usage in concert with a bundler is preferred, as you'll get optimized production code. However, if you're the type to use a CDN, you can use it as a module:
<!-- Assuming this is an inline script at the end of the document -->
<script>
import("https://unpkg.com/poster-child@0.1.0/dist/poster-child.modern.js").then(({ posterChild }) => {
posterChild();
});
</script>
If you don't use a package manager or don't want to use a CDN, grab this script (or any other version that suits your needs) from the dist folder.
poster-child offers the following options you can send as an object to the initialzing posterChild function:
// These are the default option values:
posterChild({
context: "body",
observeChanges: false,
observerContext: "body"
});
In detail, these options offer the following:
context: The context in which elements that match a selector of video[data-poster] are selected. The default context is the <body> element, but you can set this to only affect a portion of the page. The default means that elements matching body video[data-poster] are selected.observeChanges: whether or not to use a mutation observer. By default, poster-child will only lazy load placeholder images that are present in markup during startup, but you can set this option to true to capture any video[data-poster] elements that are added to the DOM later on.observerContext: Works just like context, but is the context for the mutation observer. The default means that elements match body video[data-poster] are observed.Aside from ensuring that your video markup is correct, there are some caveats you'll need to keep in mind.
poster-child is very efficient and small. It relies on no framework code, and uses only web platform APIs. That said, don't include this unless your use case supports including it.
By default, poster-child only observes video[data-poster] elements that are present in markup sent by the server. While you can use a mutation observer to observe video[data-poster] elements that are added to the DOM later by JavaScript (such as an SPA might), only do so if you absolutely need to.
The reason for this is that when all of the video[data-poster] elements have their image placeholders lazy loaded, the intersection observer that observes them will be disposed of. However, if observeChanges is set to true, this will never happen. It's a small detail, but an important one to keep in mind so your page introduces as little JavaScript activity as possible.
Browsers use an optimization called a preload scanner to opportunistically fetch resources that the primary HTML parser may be delayed from finding by parser and render blocking operations.
You should avoid using poster-child to lazy load poster images for <video> elements that are in the viewport during git s, because the browser preload scanner will not be able to detect the poster image as early as possible, causing a delay in rendering an image that should be eagerly loaded. <video> elements with poster images are candidates for LCP, which means this suboptimal pattern can raise your LCP in both the lab and the field.
Yeah.
FAQs
A teeny tiny library for lazy loading poster images on <video> elements.
We found that poster-child demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.