In deze les laat ik zien hoe je de videospeler uit de vorige les optimaliseert om de homepage van onze pizzacursus aantrekkelijker te maken. We willen de video automatisch laten afspelen en kijkers de mogelijkheid geven om door te klikken naar de volledige video.

Daarvoor introduceer ik twee belangrijke functies: de clip-component en x-mave-pop. Eerst laat ik zien hoe je de clip-component gebruikt. Die werkt in wezen hetzelfde als de player, maar is beperkt tot 60 seconden. Zo kan de video automatisch afspelen zonder dat hij de pagina overheerst.

Vervolgens laat ik zien hoe je in het HTML-bestand de player verandert in een clip. Met die eenvoudige wijziging krijg je een snel ladende video die automatisch afspeelt en maximaal 60 seconden duurt. Om kijkers toch de volledige video te laten bekijken, introduceer ik x-mave-pop. Je ziet hoe je een afspeelknop over de clip plaatst en het attribuut x-mave-pop toevoegt.

Als iemand daarop klikt, opent de volledige video in een pop-upvenster. Daarna behandel ik een mogelijk probleem: het thema dat we eerder instelden, wordt niet overgenomen door de player in de pop-up. Om dat op te lossen, laat ik zien hoe je een aangepaste x-mave-pop definieert. We lopen de documentatie door en implementeren de aangepaste pop-up, zodat ons gekozen thema (in dit geval Dolphin) ook in de schermvullende player behouden blijft.

In deze les zie je hoe deze functies de gebruikerservaring verbeteren: bezoekers krijgen meteen een voorproefje van de video en kunnen de volledige versie eenvoudig openen. Ook laat ik zien hoe flexibel je mave kunt aanpassen, zodat video's in verschillende weergavevormen dezelfde uitstraling houden.

Mentor

David van Leeuwen is een webontwikkelaar met meer dan 15 jaar ervaring. Tijdens zijn carrière werkte hij samen met multidisciplinaire teams aan projecten voor gerenommeerde bedrijven als Sonos, WeTransfer en Red Bull.

David leidt momenteel de ontwikkeling van Mave en begeleidt je als mentor door deze cursus. Hij deelt graag zijn kennis en helpt je op weg met video-integratie.