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.