Playback, your way.
Each example shows its own configuration. Defaults remain conservative: no autoplay, mute, loop or automatic coordination.
YouTube URLs and start time
Explicit start=5 overrides the URL time of one second.
<gennix-video id="url-example" size="custom" width="900" height="440" provider="youtube" src="https://www.youtube.com/watch?v=HuACikeyg0c&t=1s" start="5" muted="true" controls="true"></gennix-video>Style the generated button
Click anywhere on the poster, or use the button with a keyboard. Colors support hover and keyboard focus.
<gennix-video id="styled-example" size="custom" width="900" height="350" provider="native" src="assets/sample.mp4" poster="assets/sample-poster.jpg" start="3" poster-click="true" playsinline="true" preload="metadata" playlabel="Watch demo" play-content="text" button-background="#173d32" button-color="#ffffff" button-hover-background="#d2ef86" button-hover-color="#173d32" button-focus-background="#ffe18a" button-focus-color="#173d32" button-radius="12"></gennix-video>Icon only
An accessible Play name remains available without visible text.
<gennix-video size="custom" width="480" height="270" provider="native" src="assets/sample.mp4" poster="assets/sample-poster.jpg" play-content="icon"></gennix-video>Your own HTML button
The component preserves the button contents and accessible name.
<gennix-video id="custom-button-example" size="custom" width="900" height="350" provider="native" src="assets/sample.mp4" poster="assets/sample-poster.jpg">
<button type="button" data-gv-play aria-label="Watch our story"><span aria-hidden="true">▶</span><strong>Watch our story</strong></button>
</gennix-video>Pause other instances
Play either video. Once it really starts, the other one pauses.
<gennix-video id="coordinated-native" size="custom" width="900" height="320" provider="native" src="assets/sample.mp4" poster="assets/sample-poster.jpg" pause-others="true"></gennix-video>
<gennix-video id="coordinated-youtube" size="custom" width="900" height="320" provider="youtube" src="HuACikeyg0c" pause-others="true" muted="true"></gennix-video>Return to the poster at the end
Starts near the end of the 12-second sample so you can check the result quickly.
<gennix-video id="end-example" size="custom" width="900" height="350" provider="native" src="assets/sample.mp4" poster="assets/sample-poster.jpg" start="10" on-end="poster"></gennix-video>Loop
Loop takes precedence over on-end. Pause or close to stop the sample.
<gennix-video size="custom" width="400" height="400" aspect-ratio="1/1" provider="native" src="assets/square.mp4" poster="assets/square-poster.jpg" muted="true" loop="true" controls="true"></gennix-video>No generated Play button
This explicitly loads the native player on page load so its controls are usable. It does not autoplay.
<gennix-video id="no-button-example" size="custom" width="900" height="350" provider="native" src="assets/sample.mp4" play-button="false" controls="true" autoplay="false"></gennix-video>Hide the close button
The close × is enabled by default. false hides it without changing the available player area.
<gennix-video size="custom" width="900" height="350" provider="native" src="assets/sample.mp4" poster="assets/sample-poster.jpg" close-button="false"></gennix-video>Real full screen
This is different from size=viewport. The bottom toggle reserves 48px so it does not cover player controls. Entering full screen does not start playback.
<gennix-video id="fullscreen-example" size="custom" width="900" height="440" provider="youtube" src="HuACikeyg0c" fullscreen="true" muted="true"></gennix-video>Controls through JavaScript
Original controls can be hidden when your page provides accessible playback actions.
<gennix-video id="external-video" provider="native" src="assets/sample.mp4" poster="assets/sample-poster.jpg" controls="false"></gennix-video>
<div class="gv-demo-tools">
<button onclick="document.getElementById('external-video').play().catch(console.error)">Play</button>
<button onclick="document.getElementById('external-video').pause()">Pause</button>
</div>API, errors and recovery
Play, pause, reset or reconnect the native sample. Try a missing file, restore its source, then press Retry. Playback errors remain isolated to this instance.
Ready to test.
Playback event log
const video = document.getElementById('api-video');
video.play().catch(console.error);
video.pause();
video.reset();
video.addEventListener('gennix:error', event => console.error(event.detail.error));