Layout-stabilized Video Block archived
[OBSOLETE WITH WP 6.9]
by Weston Ruter · github.com/westonruter/layout-stabilized-video-block · website
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/westonruter/layout-stabilized-video-block/archive/refs/heads/main.zipDeclares an update source (https://github.com/westonruter/layout-stabilized-video-block), so updates arrive through the plugin's own updater.
Readme
[!NOTE]
This plugin is obsolete because the functionality in this plugin landed in WordPress 6.9. See section in frontend performance field guide.
Layout-stabilized Video Block
Contributors: westonruter
Tested up to: 6.8
Stable tag: 0.1.0
License: GPLv2 or later
Tags: performance
Description
This plugin adds missing width and height attributes to the video tag in the Video block along with the aspect-ratio style to prevent a layout shift when the video is loaded. This improves the Cumulative Layout Shift (CLS) metric from Core Web Vitals. The functionality can be disabled by adding ?disable_layout_stabilized_video_block=1 to the URL in order to see the impact of the change.
This only applies to videos selected from the Media Library since only these would have the metadata for the dimensions available.
The fix in this plugin is the same that has been proposed in PR #52185 for Gutenberg.
See blog post with full writeup: Eliminating Layout Shifts in the Video Block.
Installation
- Download the plugin ZIP from GitHub or if you have a local clone of the repo, run
npm run plugin-zip. - Visit Plugins > Add New Plugin in the WordPress Admin.
- Click Upload Plugin.
- Select the
layout-stabilized-video-block.zipfile on your system from step 1 and click Install Now. - Click the Activate Plugin button.
You may also install and update via Git Updater.
Changelog
0.1.0
- Initial release.