In deze les laat ik zien hoe je je eerste mave-video in een webpagina integreert. Dat is heel eenvoudig: je kopieert een stukje code en plakt het in je site.

Eerst laat ik zien hoe je de insluitcode uit de mave-interface kopieert. Daarna schakel ik over naar Visual Studio Code, waar een HTML-pagina voor je klaarstaat. Deze pagina maakt deel uit van de materialen in onze GitHub-repository; ik laat zien waar je die vindt. Als voorbeeld gebruiken we de webpagina van een pizzacursus. Ik bespreek de basisindeling en leg uit dat we in het midden een videoplayer willen toevoegen als trailer voor de cursus. Vervolgens plak ik de code van de mave-player op de juiste plek in het HTML-bestand. Met een kleine aanpassing aan de vormgeving zorg ik dat de player netjes in de pagina past.

Om de aanpassingsmogelijkheden van mave te laten zien, ga ik naar onze documentatie. Ik loop de opties voor de player langs en voeg een thema toe. Als voorbeeld kies ik het thema Dolphin en laat ik zien hoe je dit attribuut aan de code van de player toevoegt.

In deze les zie je hoe eenvoudig het is om een mave-videoplayer in je webpagina op te nemen én aan het ontwerp van je site aan te passen. In een paar stappen heb je een volledig werkende videoplayer die helemaal bij je website past.

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.