<pg-videowrap>

Wrap a <video> element in this wrapper element and it will automatically provide a functional, accessible play/pause button.

Features

Progressively enhances the default <video> element.
Serves primarily as a wrapper element - other children elements are allowed - allowing for the addition of overlayed elements without an additional wrapper element.
Play/pause button is fully extendable/customizable.
Gracefully (but noticeably) degrades if a provided custom play/pause button fails to load.
"Play" and "Pause" strings are translatable.
Overrides autoplaying videos when users have the prefers-reduced-motion flag set.

Usage

Download JS file

Conditionally load the JavaScript only if the <pg-videowrap> is present on the page at load:

if (document.querySelectorAll('pg-videowrap').length) import('./videowrap.min.js');

Load the script as a module in WordPress:

wp_enqueue_script_module( 'pg-videowrap', get_theme_file_uri( 'js/pg-videowrap.min.js' ), [], filemtime( get_theme_file_path( 'js/pg-videowrap.min.js' ) ) );

Content

Required content: <video> element
Permitted content: Flow content

Attributes

Name	Description	Default
`data-pause`	Label for the play/pause button when the video is playing (for translation purposes).	`Pause`
`data-play`	Label for the play/pause button when the video is paused (for translation purposes).	`Play`
`data-playbtn`	ID reference for a `<template>` element containing the markup for the play/pause button. See below.	undefined

Properties

No public properties are exposed by this component.

Events

No custom events are dispatched by this component.

Templates

If defined, the component can make use of a templated <button> to override the included, barebones play/pause button. The defined template should be a <button> element with a class of playbtn.

For styling purposes, descendents of the <button> that should only be displayed when the video is paused should be given a class of play and those that should only be displayed when the video is playing should be given a class of pause.

<template id="playbtn">
	<button type="button" class="playbtn">
		<svg width="30" height="30" aria-hidden="true">
			<circle cx="15" cy="15" r="15"/>
			<path class="play" fill="#fff" d="m20 15-7.5 4.33v-8.66z"/>
			<path class="pause" fill="#fff" d="M17.75 19h-1v-8h1zm-4.5-8h-1v8h1z"/>
		</svg>
	</button>
</template>

Style

No additional CSS is required beyond that called for by the overall page design.

Examples

Default Appearance

Utilizes a default, unstyled play/pause button.

Custom Play/Pause Button

Utilizes a custom play/pause button defined within a <template> element whose id attribute value is passed via the data-playbtn attribute on the component.

This example uses the sample in the Templates section above.

The following sample styles are applied to the component above. (You will need to provide your own reset for the <button> element itself.)

pg-videowrap {display: grid; width: max-content;}
pg-videowrap > * {grid-area: 1 / 1;}
.playbtn {z-index: 1; place-self: center;}

Custom Play/Pause Button Labels

Utilizes translated strings for "Play" and "Pause", defined by the data-play and data-pause attributes on the component, respectively. (Note that these strings are used within the play/pause button's aria-label attribute.)

Tests

Empty Component

The required child <video> element is not present.

Result: a console error is thrown.

Missing Play/Pause Button Template

The referenced play/pause button template does not exist.

Result: silently falls back to the default play/pause button template.

Improper Play/Pause Button Template

The referenced play/pause button template does not contain a <button> element with a class of playbtn.

Result: silently falls back to the default play/pause button template.

Back