Vital Video Block

Laatst kreeg ik een mail van een jonge dame met een populair blog. Ze plaatst wekelijks video’s op haar website, soms meerdere op één pagina. Ze had al gemerkt dat haar website wat trager werd, maar toen haar bezoekers het ook begonnen te melden, besloot ze er wat aan te doen.

Of ik haar kon helpen. Geen probleem, dacht ik, want er bestaan al meerdere plugins die dit oplossen. Dus: voor het weekend klaar. Maar… er is altijd een maar. Ze had zelf al wat plugins geprobeerd, geen van hen loste het probleem echt op of voldeed aan haar verwachtingen.

En het WordPress core/embed blok dan?

Van een YouTube-video laden met het embed-blok worden we ook niet heel blij. Deze laadt altijd de maxresdefault.jpg (als achtergrond-afbeelding) en je hebt geen mogelijkheid dit te wijzigen. De aspect ratio die gebruikt wordt is onduidelijk en de “media-instellingen” in combinatie met uitlijnen ( wijde breedte, volledige breedte) vind ik raar.

Als je snel iets wil insluiten is het een prima blok, maar niet als je meer controle wilt over wat er gebeurd. En de laadtijd? Videos die met een core-blok geladen worden zijn traag.

Performance screenshot van het Vital Video Blok versus het Core Embed Blok — Lighthouse performance screenshot. Getest in het *Twenty Twenty*–*Five* theme.

Wat waren de wensen voor het Vital Video blok

De klant wilde net als bij het core/embed blok een URL plakken en klaar. Het liefst een blok, geen shortcodes en niet teveel instellingen. Gelukkig vond zij het ook onzin dat de video’s in de editor volledig laden en was afspelen in de editor niet nodig. Maar de styling van de “video” moest in de editor wel precies hetzelfde zijn als op de website.

Mijn voorstel was: Op de website tonen we een webP-afbeelding met de titel en een play-button. De YouTube-video wordt pas geladen zodra de gebruiker op play klikt. In de editor laten we de button weg en tonen we alleen de video-afbeelding met de titel.

Ik kon aan de slag. Na het analyseren van de video’s die ze gebruikte, bleek dat ongeveer een kwart uit oude video’s bestond. Oudere YouTube-video’s maken vaak gedeeltelijk of helemaal geen gebruik van WebP-afbeeldingen en hebben soms slechts één of twee JPG-afbeeldingen beschikbaar. De grootste uitdaging was daarom om de gewenste afbeelding te verkrijgen, met een goede fallback-optie als back-up.

Vital Video afbeeldingen

De volgende YouTube-afbeeldingen moeten opgevraagd kunnen worden:

High quality thumbnail (480×360)
- WebP: //i.ytimg.com/vi_webp/<YouTube_Video_ID>/hqdefault.webp
- JPG: //i.ytimg.com/vi/<YouTube_Video_ID>/hqdefault.jpg
Standard quality thumbnail (640×480)
- WebP: //i.ytimg.com/vi_webp/<YouTube_Video_ID>/sddefault.webp
- JPG: //i.ytimg.com/vi/<YouTube_Video_ID>/sddefault.jpg
Maximum thumbnail (1280×720)
- WebP: //i.ytimg.com/vi_webp/<YouTube_Video_ID>/maxresdefault.webp
- JPG: //i.ytimg.com/vi/<YouTube_Video_ID>/maxresdefault.jpg

YouTube noemt de quality thumbnail standaard maar eigenlijke wordt altijd de High quality thumbnail als standaard geladen.

Zoals je ziet hebben we niet alleen te maken met WebP of JPG, maar ook verschillende URL’s waar ze vandaan komen. Alleen het bestandstype wijzigen was dus niet voldoende.

Ik heb gekozen voor deze HTML opmaak:

<figure>
	<figure style="--aspect-ratio: 16/9;">
		<picture>
			<source srcset="https://i.ytimg.com/vi_webp/<YouTube_Video_ID>/gekozen_afbeelding.webp" type="image/webp">
			<source srcset="https://i.ytimg.com/vi/<YouTube_Video_ID>/gekozen_afbeelding.jpg" type="image/jpeg">
			<img decoding="async" src="https://i.ytimg.com/vi/<YouTube_Video_ID>/gekozen_afbeelding.jpg"
			     width="720" height="19/6 of 4/3"
			     decoding="async"
			     alt="Gelijk aan de titel">
		</picture>
		<figcaption>De title van de video>/figcaption>
	</figure>
	<button>Play</button>
</figure>

Op deze manier kan de “gekozen afbeelding” worden getoond. Als er geen WebP-versie beschikbaar is, kan via de instelling “WebP-afbeeldingen uitschakelen” een JPG-versie worden opgevraagd.

Andere voordelen van deze opmaak zijn:

De alt-tekst met de titel-tekst.
WordPress zal fetchpriority="high" toevoegen als het de eerste afbeelding op de pagina is.
De ratio, mute en het uitschakelen van WebP-afbeeldingen kunnen worden aangepast met een toggle-button (if-else statements).
Een afbeeldingsgrootte kan worden geselecteerd met een <select>-optie.

Vital Video ratio

Omdat er behoorlijk wat oude video’s gebruikt worden, is het niet ongewoon om video’s met een 4:3 ratio tegen te komen. Normaal gebruiken we hiervoor deze (oude) CSS-truc, maar dit voelt altijd een beetje als een hack. En er zijn dan relatief veel styles nodig om de titel en button op de juiste plek te krijgen.

::before {
    content: "";
    display: block;
    padding-bottom: 56.25%;
  }

::before {
  padding-bottom: calc(100% / var(--aspect-ratio));
}

Daarom heb ik ervoor gekozen om CSS Grid op <figure> te gebruiken. Omdat <picture> nu een grid-item is en align-content: stretch; standaad is, neemt <picture> direct de juiste aspect-ratio aan zonder dat er extra CSS nodig is.

display: grid;
grid: [stack] 1fr / [stack] 1fr;

Een ander voordeel van CSS-Grid is dat de afbeelding, titel en button gestapeld konden worden en met place-content op elke gewenste plaats gezet kunnen worden.

De autoplay-policy van browsers en Vital Video

Autoplay-policies in browsers zorgen ervoor dat video’s of audio niet automatisch worden afgespeeld zonder toestemming van de gebruiker. Dit voorkomt irritatie en beperkt onnodig dataverbruik, vooral op mobiele apparaten. In de meeste gevallen mag autoplay alleen als het geluid is uitgeschakeld of als de gebruiker al interactie heeft gehad met de site.

Vital Video autoplay scenario

Omdat we eerst een afbeelding met een button tonen, is het altijd nodig om minimaal één keer te klikken. Daarna wordt de YouTube-video geladen.

Of de video meteen afspeelt of dat je nog op de YouTube-knop moet klikken, hangt af van of de video op mute staat. Daarom is er een mute-optie toegevoegd aan de instellingen. De eenvoudigste oplossing hiervoor was een toggle-knop die simpelweg &mute=1 aan de YouTube-URL toevoegt of verwijdert.

Met het Vital Video Block is de autoplay-policy eigenlijk alleen van toepassing op mobiele browsers, Safari op desktop en enkele minder bekende browsers.

Mute uit: Vereist twee klikken om af te spelen met geluid.

Oasis - Wonderwall (Official Video) — Oasis – Wonderwall (Official Video)

Mute aan: Eén klik en de video begint direct af te spelen zonder geluid.

Heart - Stairway to Heaven Led Zeppelin - Kennedy Center Honors HD — Heart – Stairway to Heaven Led Zeppelin – Kennedy Center Honors HD

Dit blok loste niet alleen het probleem van mijn klant op, maar mogelijk ook dat van veel andere WordPress-gebruikers. Daarom besloot ik in overleg met haar om mijn werk niet in rekening te brengen. In ruil daarvoor mocht ik Vital Video toevoegen aan de plugin-directory. Ze stemde hiermee in, en zo geschiedde het.

Wil je deze plugin gebruiken? Zoek naar “Vital Video Block” in je WP Admin of download de Vital Video plugin via WordPress.org!