@smartimpact-it/modern-video-embed 2.0.1 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -14
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -20,7 +20,7 @@ Modern, performant YouTube and Vimeo embed web components with lazy loading, eve
|
|
|
20
20
|
#### Via NPM (recommended for projects)
|
|
21
21
|
|
|
22
22
|
```bash
|
|
23
|
-
npm install @
|
|
23
|
+
npm install @smartimpact-it/modern-video-embed
|
|
24
24
|
```
|
|
25
25
|
|
|
26
26
|
#### Via CDN (for quick prototypes)
|
|
@@ -28,11 +28,11 @@ npm install @siit-dev/video-embed
|
|
|
28
28
|
```html
|
|
29
29
|
<script
|
|
30
30
|
type="module"
|
|
31
|
-
src="https://unpkg.com/@
|
|
31
|
+
src="https://unpkg.com/@smartimpact-it/modern-video-embed@latest/dist/index.js"
|
|
32
32
|
></script>
|
|
33
33
|
<link
|
|
34
34
|
rel="stylesheet"
|
|
35
|
-
href="https://unpkg.com/@
|
|
35
|
+
href="https://unpkg.com/@smartimpact-it/modern-video-embed@latest/dist/css/components.css"
|
|
36
36
|
/>
|
|
37
37
|
```
|
|
38
38
|
|
|
@@ -337,7 +337,7 @@ embed.addEventListener("qualitychange", (e) => {
|
|
|
337
337
|
"Quality changed:",
|
|
338
338
|
e.detail.oldQuality,
|
|
339
339
|
"→",
|
|
340
|
-
e.detail.newQuality
|
|
340
|
+
e.detail.newQuality,
|
|
341
341
|
);
|
|
342
342
|
console.log("Available qualities:", e.detail.availableQualities);
|
|
343
343
|
});
|
|
@@ -829,7 +829,7 @@ const embed = document.querySelector("youtube-embed");
|
|
|
829
829
|
console.log("Lazy enabled:", embed.hasAttribute("lazy"));
|
|
830
830
|
console.log(
|
|
831
831
|
"In viewport:",
|
|
832
|
-
embed.getBoundingClientRect().top < window.innerHeight
|
|
832
|
+
embed.getBoundingClientRect().top < window.innerHeight,
|
|
833
833
|
);
|
|
834
834
|
```
|
|
835
835
|
|
|
@@ -988,7 +988,7 @@ For older browser support, include these polyfills:
|
|
|
988
988
|
|
|
989
989
|
player.addEventListener("qualitychange", (e) => {
|
|
990
990
|
console.log(
|
|
991
|
-
`Quality changed: ${e.detail.oldQuality} → ${e.detail.newQuality}
|
|
991
|
+
`Quality changed: ${e.detail.oldQuality} → ${e.detail.newQuality}`,
|
|
992
992
|
);
|
|
993
993
|
});
|
|
994
994
|
</script>
|
|
@@ -1018,7 +1018,7 @@ For older browser support, include these polyfills:
|
|
|
1018
1018
|
player.addEventListener(eventName, (e) => {
|
|
1019
1019
|
const entry = document.createElement("div");
|
|
1020
1020
|
entry.textContent = `${new Date().toLocaleTimeString()} - ${eventName}: ${JSON.stringify(
|
|
1021
|
-
e.detail || {}
|
|
1021
|
+
e.detail || {},
|
|
1022
1022
|
)}`;
|
|
1023
1023
|
log.prepend(entry);
|
|
1024
1024
|
});
|
|
@@ -1156,24 +1156,24 @@ npm publish
|
|
|
1156
1156
|
|
|
1157
1157
|
```javascript
|
|
1158
1158
|
// Full bundle
|
|
1159
|
-
import "@
|
|
1159
|
+
import "@smartimpact-it/modern-video-embed";
|
|
1160
1160
|
|
|
1161
1161
|
// YouTube only
|
|
1162
|
-
import "@
|
|
1162
|
+
import "@smartimpact-it/modern-video-embed/dist/youtube-only.js";
|
|
1163
1163
|
|
|
1164
1164
|
// Vimeo only
|
|
1165
|
-
import "@
|
|
1165
|
+
import "@smartimpact-it/modern-video-embed/dist/vimeo-only.js";
|
|
1166
1166
|
```
|
|
1167
1167
|
|
|
1168
1168
|
#### With Bundlers (Webpack, Vite, etc.)
|
|
1169
1169
|
|
|
1170
1170
|
```javascript
|
|
1171
1171
|
// Install
|
|
1172
|
-
npm install @
|
|
1172
|
+
npm install @smartimpact-it/modern-video-embed
|
|
1173
1173
|
|
|
1174
1174
|
// Import in your app
|
|
1175
|
-
import '@
|
|
1176
|
-
import '@
|
|
1175
|
+
import '@smartimpact-it/modern-video-embed';
|
|
1176
|
+
import '@smartimpact-it/modern-video-embed/dist/css/components.css';
|
|
1177
1177
|
|
|
1178
1178
|
// Use in your HTML/JSX
|
|
1179
1179
|
<youtube-embed video-id="dQw4w9WgXcQ" controls></youtube-embed>
|
|
@@ -1182,7 +1182,7 @@ import '@siit-dev/video-embed/dist/css/components.css';
|
|
|
1182
1182
|
#### TypeScript Support
|
|
1183
1183
|
|
|
1184
1184
|
```typescript
|
|
1185
|
-
import { YouTubeEmbed } from "@
|
|
1185
|
+
import { YouTubeEmbed } from "@smartimpact-it/modern-video-embed";
|
|
1186
1186
|
|
|
1187
1187
|
const embed = document.querySelector("youtube-embed") as YouTubeEmbed;
|
|
1188
1188
|
embed.play();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@smartimpact-it/modern-video-embed",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"description": "Modern YouTube and Vimeo embed web components with lazy loading, accessibility, quality control, and comprehensive API",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -72,4 +72,4 @@
|
|
|
72
72
|
"dependencies": {
|
|
73
73
|
"bootstrap": "^5.3.8"
|
|
74
74
|
}
|
|
75
|
-
}
|
|
75
|
+
}
|