Vertical Video Player

Preview
Code

VerticalVideoPlayer.html

<bw-video-player-provider
  data-project-id="54009"
  data-content-id="5ab6a5e1-689c-4103-962d-e7e68a4258ff"
  data-show-user-interface="false"
  data-video="true"
  data-aspect="9/16"
  data-height="480"
>
  <bw-video-feature-image></bw-video-feature-image>
  <bw-video-control-bar>
    <bw-video-prev-seconds-button data-color="white" data-seconds="10"></bw-video-prev-seconds-button>
    <bw-video-play-pause-button data-color="white" data-size="56"></bw-video-play-pause-button>
    <bw-video-next-seconds-button data-color="white" data-seconds="10"></bw-video-next-seconds-button>
  </bw-video-control-bar>
  <bw-video-widget-bar>
    <bw-video-play-pause-button></bw-video-play-pause-button>
    <bw-video-widget-controls>
      <bw-video-playback-rate-button></bw-video-playback-rate-button>
      <bw-video-prev-seconds-button data-seconds="10"></bw-video-prev-seconds-button>
      <bw-video-next-seconds-button data-seconds="10"></bw-video-next-seconds-button>
      <bw-video-time-indicator></bw-video-time-indicator>
      <bw-video-progress-bar></bw-video-progress-bar>
      <bw-video-close-widget-button></bw-video-close-widget-button>
    </bw-video-widget-controls>
  </bw-video-widget-bar>
</bw-video-player-provider>

Installation

npx @beyondwords/cli components add vertical-video-player --html

pnpm dlx @beyondwords/cli components add vertical-video-player --html

yarn dlx @beyondwords/cli components add vertical-video-player --html

bunx --bun @beyondwords/cli components add vertical-video-player --html

Usage

Same composition, module imports, and controls as Video Player, with portrait sizing via data-aspect="9/16" and data-height="480" on the provider (the code tab above shows the full markup). Use it for stories, Reels-style clips, or other vertical video.

These components expect the BeyondWords player to be available as a global BeyondWords (the player UMD script). Load it before the provider connects.

Minimal PlayerA transparent, ultra-minimal player that expands from play + call to action into rate, seek-back, and time controls.

Getting started

Components

Examples

Installation

Usage

​Installation

​Usage

Installation

Usage