Because we’re using native webcomponents, we can use slots to render your html inside the player. This means you can add your own buttons or other things to be rendered at specific times and/or spots.

The trick is adding slot="end-screen" inside the component. You can use your own custom CSS and make however you like. This end-screen will only be shown after the video is played (and only once).

<!-- slot[end-screen] is shown after the video ends and requires "display: none" for initial render -->
<div slot="end-screen" style="display: none;">
  <div>
    <h3>
      Get notified on updates
    </h3>
    <p>
      Leave your email and we'll let you know when we release a new video.
    </p>
    <form>
      <input type="text"></input>
      <button>Subscribe</button>
    </form>
    <!-- call <mave-player>.play(), which replays the video when ended -->
    <a href="#" onClick="event.preventDefault(); this.closest('mave-player').play();">or watch it again ↻</a>
  </div>
</div>

slots

End screen

Preview

Get notified on updates