Perfecte YouTube Core Web Vitals
Leer hoe je een YouTube video embed zonder PageSpeed te verliezen

Perfecte YouTube Core Web Vitals
YouTube video's op jouw webpagina plaatsen is een goede manier om de pagina nog beter te te maken. De ervaring van een goede video op een pagina is gewoon waanzinnig!
Maar hoe hard je ook je best doet, YouTube video's zullen het laden van jouw pagina altijd vertragen als je dit op de standaar manier doet met de voorgetelde embed code.
In dit artikel laat ik je zien hoe je een YouTube video op jouw pagina kunt plaatsen zonder dat jouw Core Web Vitals daar onder moeten lijden.

Zo embed je een Youtube Video (de langzame manier)
YouTube maakt het je wel heel gemakkelijk om een video op jouw pagina te embedden. Eerst navigeer je naar de video Pagina op Youtube en daarna klik je op de 'share' knop onder de video.
Vervolgens kies je 'embed' en kopieer je de embed code:
Plak daarna de gekopieerde code in de HTML van jouw site. Maar gebeurt er nu wanneer je een lighthouse audit doet op diezelfde pagina? Je ziet dat alle belangrijke Core Web Vitals metrics zoals First Contentful Paint, Speed index, Largest Contentful Paint and the Time to interactive met 1 tot 1.5 seconden zijn toegenomen. Laten we dit eens oplossen:
Normale YouTube embed
Slimme YouTube embed
Fix die YouTube Core Web Vitals!
We gaan dit oplossen door eerst een placeholder afbeelding te gebruiken voor de Youtube Video. Zo'n afbeelding laadt veel sneller en blokkeert de eerste render fase van de browser niet. Later, wanneer het nodig is dat Youtube Video afgespeeld kan worden vervangen we de placeholder door de uiteindelijke YouTube video
Stap 1: Download de placeholder afbeelding
YouTube maakt het je heel gemakkelijk om de placeholer afbeelding te vinden. Kijk daarvoor naar de URL van de video zelf. Voor dit voorbeeld gebruiker we deze url: https://www.youtube.com/watch?v=Oxv6IRcuNaI
Als je naar die URL kijkt zie je dat er een variable in staat: 'Oxv6IRcuNaI'. Kopieer deze variable en plak deze in de standaard locatie voor een YouTube screenshot;https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp
Open nu deze url, klik met de rechtermuisknop op de afbeelding en selecteer 'afbeelding opslaan als'. Nadat je de afbeelding hebt opgeslagen is het handig om de afbeelding wat te verkleinen tot de uiteidelijke resolutie van de video op jouw scherm.
Stap 2: plaats de placeholder
De volgende stap is om de placeholder te gebruiken. Ik plaats deze in een relatief gepositioneerde div en gebruik de CSS property object-fit:cover om de afbeelding op de juiste manier te plaatsen. Daarna zet ik een lege iframe in dezelfde div. Deze gebuik ik later om de YouTube video te laten zien.
<div id="ytplaceholder"> <img class="ytcover" loading="lazy" src="https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp"> <iframe id="ytiframe" data-src="https://www.youtube.com/embed/Oxv6IRcuNaI"> </iframe> </div>
We zijn al een heel eind op weg. Laten we wat styling toevoegen. Ik gebruik de padding truc om er voor te zorgen dat de video op ieder apparaat goed schaalt met de juiste dimensies.
De placeholder image krijgt een absolutie positie aan de bovenkant van de div en een objectt-fit cover eigenschap om het gedrag van een achtergondafbeelding na te bootsen. HEt voordeel heirvan is dat ik nu respinsive images kan gebruiken icm met lazy loading als ik dat zou willen.
Als laatste plaats ik een abosuut gepositoneerd iframe in de div die de hoogte en breede van de onderliggende container aan kan nemen.
#ytplaceholder {
position: relative;
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
#ytplaceholder img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
object-fit: cover
}
#ytplaceholder iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
opacity: 0;
transition: opacity 2.4s ease 0s;
}
Nu komt de grote truc: nu de pagina is geladen kan ik eindelijk de placeholder afbeelding vervangen door de uiteindelijke Youtube Video. Om dat mogelijk te maken hang ik een 'event listner' aan de afbeelding. Zodra iemand met zijn of haar muist over de afbeelding heen gaat wordt de uiteindelijke vidoe geladen. De iframe die voorheen onzichtbaar was (door opacity:0) wordt nu zichtbaar doordat ik de opacity aanpas..
<script> // youtube placeholder var ytplaceholder = document.getElementById ('ytplaceholder'); // change the video var videolistner = function(e) { var ytiframe = document.getElementById('ytiframe'); ytiframe.src = ytiframe.getAttribute('data-src'); ytiframe.onload = ytiframe.style.opacity = 1; ytplaceholder.removeEventListener("mouseover", videolistner); }; //listen to the mouseover event to change the video ytplaceholder.addEventListener('mouseover', videolistner);
Always show the YouTube video
Lets go one step further and queue the YouTube video to always replace the placeholder image even without any interaction. I do not want to do that right away, let's wait until the browser is idle. I'll use a time-out for simplicity but the requestIdleCallback() method would be great choice as well
<script> var ytplaceholder = document.getElementById ('ytplaceholder'); var videolistner = function (e) { var ytiframe = document.getElementById ('ytiframe'); ytiframe.src = ytiframe.getAttribute ('data-src'); ytiframe.onload = ytiframe.style.opacity=1; ytplaceholder.removeEventListener ("mouseover", videolistner); }; ytplaceholder.addEventListener ('mouseover', videolistner); // show the YouTube video anyway after 3 seconds setTimeout(function(){ videolistner(); },3000); </script>
Daar zijn we dan, een perfecte PageSpeed score en nog steeds een Youtube Vidoe op de pagina met maar een paar regels code..
Deze techniek uitbreiden.
Natuurlijk is dit maar een simpel voorbeeld die alleen werkt wanneer er maar 1 Youtube Video op de pagina staat. Daarom is het een goed idee om deze techniek aan te passen aan jouw specifieke wensen.
Je kunt bijvoorbeeld de interaction observer gebruiken om automatisch alle placeholders te vervangen voor de uiteindelijke video zodra een bezoeker richting een video scrollt.
Wat je ook doet, het idee blijft altijd hetzelfde.
I help teams pass the Core Web Vitals:
A slow website is likely to miss out on conversions and revenue. Nearly half of internet searchers don't wait three seconds for a page to load before going to another site. Ask yourself: "Is my site fast enough to convert visitors into customers?"

