How to use @lrnwebcomponents/media-behaviors - 3 common examples
To help you get started, we’ve selected a few @lrnwebcomponents/media-behaviors examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
elmsln / lrnwebcomponents / elements / video-player / video-player.js View on Github 
media-title$="[[mediaTitle]]" // The title of the media
source$="[[source]]" // The source URL of the media
sticky-corner$="[[stickyCorner]]" // When user scrolls a playing video off-screen,
which corner will it stick to? Values are:
top-right (default), top-left, bottom-left, bottom-right,
and none (to turn sticky off)
thumbnail-src$="[[thumbnailSrc]]" // Optional thumbanil/cover image url
width$="[[width]]"> // The width of the media
<div slot="caption">Optional caption info.</div>- @demo demo/index.html
- @customElement video-player */ class VideoPlayer extends MediaBehaviorsVideo( A11yBehaviors(SchemaBehaviors(SimpleColorsPolymer)) ) { // render function static get template() { return html` <style> :host { display: block; margin: 0 0 15px; } .video-caption { font-style: italic; margin: 0; padding: 8px; @apply --video-player-caption-theme; }</style>
elmsln / lrnwebcomponents / elements / video-player / video-player.es6.js View on Github media-title$="[[mediaTitle]]" // The title of the media
source$="[[source]]" // The source URL of the media
sticky-corner$="[[stickyCorner]]" // When user scrolls a playing video off-screen,
which corner will it stick to? Values are:
top-right (default), top-left, bottom-left, bottom-right,
and none (to turn sticky off)
thumbnail-src$="[[thumbnailSrc]]" // Optional thumbanil/cover image url
width$="[[width]]"> // The width of the media
<div slot="caption">Optional caption info.</div>- @demo demo/index.html
- @customElement video-player */ class VideoPlayer extends MediaBehaviorsVideo( A11yBehaviors(SchemaBehaviors(SimpleColorsPolymer)) ) {
// render function static get template() { return html` <style> :host { display: block; margin: 0 0 15px; } .video-caption { font-style: italic; margin: 0; padding: 8px; @apply --video-player-caption-theme;</style>
elmsln / lrnwebcomponents / elements / video-player / src / video-player.js View on Github media-title$="[[mediaTitle]]" // The title of the media
source$="[[source]]" // The source URL of the media
sticky-corner$="[[stickyCorner]]" // When user scrolls a playing video off-screen,
which corner will it stick to? Values are:
top-right (default), top-left, bottom-left, bottom-right,
and none (to turn sticky off)
thumbnail-src$="[[thumbnailSrc]]" // Optional thumbanil/cover image url
width$="[[width]]"> // The width of the media
<div slot="caption">Optional caption info.</div>- @demo demo/index.html
- @customElement video-player
/
class VideoPlayer extends MediaBehaviorsVideo(
A11yBehaviors(SchemaBehaviors(SimpleColorsPolymer))
) {
/ REQUIRED FOR TOOLING DO NOT TOUCH /
/*
- Store the tag name to make it easier to obtain directly.
- @notice function name must be here for tooling to operate correctly / static get tag() { return "video-player"; } /*
- life cycle, element is afixed to the DOM */ connectedCallback() { super.connectedCallback(); }
@lrnwebcomponents/media-behaviors
Automated conversion of media-behaviors/
