In this lesson, I'm guiding you through the process of integrating your first mave video into a webpage. I start by emphasizing how simple it is - it's just a matter of copying a snippet of code and pasting it into your site.

I begin by demonstrating how to copy the embed code from the mave interface. Then, I switch over to Visual Studio Code, where I've prepared an HTML page for you to work with. This page is part of the resources available in our GitHub repository, which I point out how to access. The example I'm using is a webpage for a pizza-making course. I show you the basic layout of the page and explain that we want to add a video player in the middle as a trailer for the course. I then paste the mave player code into the appropriate spot in the HTML file. After that, I make a quick adjustment to the styling to ensure it fits well within the page layout.

To showcase mave's customization options, I navigate to our documentation page. I browse through the player options and decide to add a theme to our video player. I choose the Dolphin theme as an example and show you how to add this attribute to the player code.

Throughout this lesson, my aim is to demonstrate how straightforward it is to not only embed a mave video player into your webpage, but also to customize it to fit your site's design. I'm showing you that with just a few simple steps, you can have a fully functional, customized video player integrated into your website.

Mentor

David van Leeuwen is a web developer with over 15 years of experience. Throughout his career, he has collaborated with multidisciplinary teams on projects for renowned companies such as Sonos, WeTransfer, and Red Bull.

David is currently leading the development of mave and will be the mentor if this course. He is enthusiastic about sharing his knowledge and helping you get started with video integration.