In this lesson, I'm showing you how to optimize the video player we added in the previous lesson to make our pizza course homepage more inviting. I explain that we want the video to autoplay and allow viewers to click to see the full-length video.

I introduce two key features to achieve this: the clip component and the x-mave-pop feature. I start by demonstrating how to use the clip component, which is essentially the same as the player but limited to 60 seconds. This allows for autoplay without overwhelming the page.

Next, I guide you through changing the player to a clip in the HTML file. I point out that this simple change results in an autoplaying, fast-loading video that's capped at 60 seconds. To enable viewers to watch the full video, I introduce the x-mave-pop pop feature. I show you how to add a play button overlay to the clip and implement the x-mave-pop pop attribute.

This allows the full video to open in a pop-up window when clicked. I then address a potential issue: the theme we previously set isn't carrying over to the pop-up player. To fix this, I demonstrate how to define a custom x-mave-pop. I walk you through the documentation and show you how to implement this custom pop-up, which allows us to maintain our chosen theme (in this case, Dolphin) in the full-screen player.

Throughout the lesson, I'm emphasizing how these features can enhance user experience by providing a glimpse of the video content upfront, while still allowing easy access to the full content. I'm also showcasing mave's flexibility in customization, allowing you to maintain a consistent look and feel across different video display formats.

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.