app.component.html

<div id="container">
  <vm-player #player playsinline (vPlaybackReady)="onPlaybackReady()">
    <vm-video
      cross-origin="true"
      poster="https://files.vidstack.io/agent-327/poster.png"
    >
      <source
        data-src="https://files.vidstack.io/agent-327/720p.mp4"
        type="video/mp4"
      />
      <track
        default
        kind="subtitles"
        src="https://files.vidstack.io/agent-327/subs/english.vtt"
        srclang="en"
        label="English"
      />
      <track
        kind="subtitles"
        src="https://files.vidstack.io/agent-327/subs/spanish.vtt"
        srclang="es"
        label="Spanish"
      />
    </vm-video>

    <vm-default-ui>
      <!-- Custom UI component. -->
      <tap-sides-to-seek></tap-sides-to-seek>
    </vm-default-ui>
  </vm-player>
</div>

<style>
  :host {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #container {
    width: 100%;
    max-width: 960px;
  }
</style>