@haxtheweb/a11y-media-player
Version:
A feature rich, highly accessible video player
135 lines (117 loc) • 4.43 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>a11y-media-player demo</title>
<script src="../../../node_modules/@haxtheweb/deduping-fix/deduping-fix.js"></script>
<script type="module">
import "@haxtheweb/demo-snippet/demo-snippet.js";
import "../a11y-media-player.js";
</script>
<style is="custom-style" include="demo-pages-shared-styles">
.vertical-section-container.centered>* {
--demo-snippet-demo: {
padding: 0;
};
}
.vertical-section-container.centered {
width: 100%;
max-width: unset ;
}
.smaller-examples {
max-width: 75%;
min-width: 400px;
margin: 0 auto;
}
@media print {
demo-snippet {
height: undet;
overflow: visible;
}
}
</style>
</head>
<body>
<div class="vertical-section-container centered">
<h1>a11y-media-player YouTube</h1>
<div class="smaller-examples">
<h2>a11y-media-player YouTube demo</h2>
<demo-snippet>
<template>
<a11y-media-player accent-color="red" youtube-id="BKorP55Aqvg"></a11y-media-player>
</template>
</demo-snippet>
</div>
<h2>a11y-media-player YouTube demo with transcript</h2>
<demo-snippet>
<template>
<a11y-media-player accent-color="pink" dark youtube-id="NP0mQeLWCCo">
<video><track label="English" kind="subtitles" srclang="en" src="./samples/bueller.vtt"default></video>
</a11y-media-player>
</template>
</demo-snippet>
<h2>a11y-media-player with YouTube's iframe for progressive enhancement</h2>
<demo-snippet>
<template>
<a11y-media-player accent-color="red">
<iframe title="youtube video" width="560" height="315" src="https://www.youtube.com/embed/BKorP55Aqvg" allowfullscreen></iframe>
</a11y-media-player>
</template>
</demo-snippet>
<demo-snippet>
<template>
<a11y-media-player accent-color="yellow" dark>
<iframe title="youtube video" width="560" height="315" src="https://www.youtube.com/embed/NP0mQeLWCCo" allowfullscreen></iframe>
<video><track label="English" kind="subtitles" srclang="en" src="./samples/bueller.vtt"default></video>
</a11y-media-player>
</template>
</demo-snippet>
<h2>a11y-media-player YouTube demo with time code automatic preloading</h2>
<demo-snippet>
<template>
<a11y-media-player accent-color="purple" youtube-id="NP0mQeLWCCo&t=18s" preload="auto">
<video><track label="English" kind="subtitles" srclang="en" src="./samples/bueller.vtt"></video>
</a11y-media-player>
</template>
</demo-snippet>
<h2>a11y-media-player YouTube demo clip no preloading</h2>
<demo-snippet>
<template>
<a11y-media-player
id="example"
dark accent-color="deep-purple"
youtube-id="NP0mQeLWCCo&start=5s"
preload="none">
<track label="English" kind="subtitles" srclang="en" src="./samples/bueller.vtt" default>
</a11y-media-player>
</template>
</demo-snippet>
<div class="smaller-examples">
<h2>a11y-media-player YouTube demo with custom thumbail</h2>
<demo-snippet>
<template>
<a11y-media-player
accent-color="cyan"
height="300px"
youtube-id="NP0mQeLWCCo"
thumbnail-src="https://www.memesmonkey.com/images/memesmonkey/d7/d7c0b62fa61f450c2735799b34073f53.jpeg"
width="400px"
preload="none">
</a11y-media-player>
</template>
</demo-snippet>
<h2>a11y-media-player YouTube demo, standalone with width set</h2>
<demo-snippet>
<template>
<a11y-media-player
accent-color="deep-orange"
stand-alone width="400px"
youtube-id="BKorP55Aqvg">
</a11y-media-player>
</template>
</demo-snippet>
</div>
</div>
</body>
</html>