youtube-video-element - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

package.json

		{
		"name": "youtube-video-element",
		"version": "0.2.0",
		"version": "0.2.1",
		"description": "Custom element (web component) for the YouTube player.",
		"type": "module",
		"main": "youtube-video-element.js",
		"files": [
		"youtube-video-element.js",
		"README.md"
		],
		"files": [],
		"scripts": {
		"dev": "npx serve .",
		"test": "web-test-runner test.js --node-resolve"
		"lint": "npx eslint *.js -c ./node_modules/wet-run/.eslintrc.json",
		"test": "wet run",
		"dev": "wet serve"
		},
		"repository": "muxinc/youtube-video-element",
		"author": "@muxinc",
		"license": "MIT",
		"homepage": "https://github.com/muxinc/youtube-video-element#readme",
		"bugs": {
		"url": "https://github.com/muxinc/youtube-video-element/issues"
		},
		"devDependencies": {
		"wet-run": "^0.2.0"
		},
		"keywords": [
		@@ -22,9 +29,3 @@ "youtube",
		"custom element"
		],
		"author": "@muxinc",
		"license": "MIT",
		"devDependencies": {
		"@open-wc/testing": "^3.1.7",
		"@web/test-runner": "^0.15.0"
		}
		]
		}

README.md

		# `<youtube-video>`

		A custom element (web component) for the YouTube player.
		[![Version](https://img.shields.io/npm/v/youtube-video-element?style=flat-square)](https://www.npmjs.com/package/youtube-video-element)
		[![Badge size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/youtube-video-element/+esm?compression=gzip&label=gzip&style=flat-square)](https://cdn.jsdelivr.net/npm/youtube-video-element/+esm)

		The element API matches the HTML5 `<video>` tag, so it can be easily swapped with other media, and be compatible with other UI components that work with the video tag.
		A [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
		for the YouTube player with an API that matches the
		[`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) API.

		- 🏄‍♂️ Compatible [`HTMLMediaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) API
		- 🕺 Seamlessly integrates with [Media Chrome](https://github.com/muxinc/media-chrome)

		## Example
		@@ -8,0 +14,0 @@

youtube-video-element.js

		@@ -10,21 +10,23 @@ // https://developers.google.com/youtube/iframe_api_reference

		const templateShadowDOM = document.createElement('template');
		templateShadowDOM.innerHTML = `
		<style>
		:host {
		display: inline-block;
		line-height: 0;
		position: relative;
		min-width: 300px;
		min-height: 150px;
		}
		iframe {
		position: absolute;
		top: 0;
		left: 0;
		}
		</style>
		`;
		const templateShadowDOM = globalThis.document?.createElement('template');
		if (templateShadowDOM) {
		templateShadowDOM.innerHTML = /html/`
		<style>
		:host {
		display: inline-block;
		line-height: 0;
		position: relative;
		min-width: 300px;
		min-height: 150px;
		}
		iframe {
		position: absolute;
		top: 0;
		left: 0;
		}
		</style>
		`;
		}

		class YoutubeVideoElement extends HTMLElement {
		class YoutubeVideoElement extends (globalThis.HTMLElement ?? class {}) {
		static observedAttributes = [
		@@ -325,5 +327,2 @@ 'autoplay',
		this.api?.seekTo(val, true);
		if (this.paused) {
		this.pause();
		}
		});
		@@ -540,3 +539,3 @@ }

		if (!globalThis.customElements.get('youtube-video')) {
		if (globalThis.customElements && !globalThis.customElements.get('youtube-video')) {
		globalThis.customElements.define('youtube-video', YoutubeVideoElement);
		@@ -543,0 +542,0 @@ }

Fixed alerts