New block: accessible YouTube embed

[YvetteNikolov]

Het embedden van YouTube video's heeft gevolgen voor de toegankelijkheid van een website. Zo moet er én ondertiteling én een audiodescriptie gegeven worden.

Vaak geven we het advies aan klanten die hun website laten testen dat ze een knop moeten gebruiken die naar de video op YouTube.com verwijst. Dan is het niet meer de verantwoordelijkheid van de klant.

Nieuw blok idee: een blok waarin de klant een videolink kan plaatsen. Deze lijkt qua look en feel op een embed, maar verwijst naar de YouTube site als je er op klikt. Het is mogelijk om de YouTube API te gebruiken om automatisch een thumbnail in te laden.

https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api

[YvetteNikolov]

Voor @lieke2003, zoiets:

1. Als je het blokje op de pagina plaatst, moet er eerst een placeholder component komen met:

• het YouTube icoon,
• de titel "YouTube URL (toegankelijk)
• instructie "Plak een link naar de inhoud die je wilt laten zien op je site."
• input type="url" + "Insluiten" knop
  Zie ook de screenshot hierboven

Kijk in de block-library package van Gutenberg om te kijken hoe het originele YouTube blokje is opgebouwd. Het is volgens mij een block-variation van het "embed" blokje https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src

2. Zodra je op "Insluiten" klikt, wordt gevalideerd of het wel een YouTube video link is. Zo ja, dan wordt de link opgeslagen als attribute.
3. ID wordt uit de URL gehaald en wordt er een extra link opgebouwd zoals https://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg. Zie ook de stackoverflow in de posts. Deze wordt ook opgeslagen als attribute.
4. Vervolgens kunnen er met deze twee attributen een afbeelding + knop gemaakt worden:

<div class="yard-blocks-a11y-youtube">
  <img src="youTubeImage" alt="" />
  <a href="youTubeLink">Bekijk de video op YouTube</a>
</div>