@justinribeiro/lite-youtube - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

lite-youtube.d.ts

@@ -41,2 +41,6 @@ export declare class LiteYTEmbed extends HTMLElement {
     }
+    interface Window {
+        liteYouTubeNonce: string;
+        liteYouTubeIsPreconnected: boolean;
+    }
 }

lite-youtube.js

@@ -64,4 +64,8 @@ export class LiteYTEmbed extends HTMLElement {
         const shadowDom = this.attachShadow({ mode: 'open' });
+        let nonce = '';
+        if (window.liteYouTubeNonce) {
+            nonce = `nonce="${window.liteYouTubeNonce}"`;
+        }
         shadowDom.innerHTML = `
-      <style>
+      <style ${nonce}>
         :host {
@@ -73,5 +77,2 @@ contain: content;
           padding-bottom: calc(100% / (16 / 9));
-          --lyt-animation: all 0.2s cubic-bezier(0, 0, 0.2, 1);
-          --lyt-play-btn-default: #212121;
-          --lyt-play-btn-hover: #f00;
         }
@@ -108,3 +109,2 @@
           width: 100%;
-          transition: var(--lyt-animation);
           z-index: 1;
@@ -114,17 +114,11 @@ }
         #playButton {
-          width: 70px;
-          height: 46px;
-          background-color: var(--lyt-play-btn-hover);
+          width: 68px;
+          height: 48px;
+          background-color: transparent;
+          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
           z-index: 1;
-          opacity: 0.8;
-          border-radius: 14%;
-          transition: var(--lyt-animation);
           border: 0;
+          border-radius: inherit;
         }
 
-        #frame:hover > #playButton {
-          background-color: var(--lyt-play-btn-hover);
-          opacity: 1;
-        }
-
         #playButton:before {
@@ -217,3 +211,3 @@ content: '';
             const iframeHTML = `
-<iframe frameborder="0"
+<iframe frameborder="0" title="${this.videoTitle}"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
@@ -236,3 +230,2 @@ src="https://www.youtube${wantsNoCookie}.com/embed/${embedTarget}autoplay=${autoplay}&${this.params}"
     initImagePlaceholder() {
-        LiteYTEmbed.addPrefetch('preconnect', 'https://i.ytimg.com/');
         const posterUrlWebp = `https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`;
@@ -285,4 +278,5 @@ const posterUrlJpeg = `https://i.ytimg.com/vi/${this.videoId}/${this.posterQuality}.jpg`;
     static warmConnections() {
-        if (LiteYTEmbed.isPreconnected)
+        if (LiteYTEmbed.isPreconnected || window.liteYouTubeIsPreconnected)
             return;
+        LiteYTEmbed.addPrefetch('preconnect', 'https://i.ytimg.com/');
         LiteYTEmbed.addPrefetch('preconnect', 'https://s.ytimg.com');
@@ -294,2 +288,3 @@ LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube.com');
         LiteYTEmbed.isPreconnected = true;
+        window.liteYouTubeIsPreconnected = true;
     }
@@ -296,0 +291,0 @@ }

package.json

@@ -28,3 +28,4 @@ {
   "license": "MIT",
-  "version": "1.4.0",
+  "version": "1.5.0",
+  "type": "module",
   "main": "lite-youtube.js",
@@ -31,0 +32,0 @@ "module": "lite-youtube.js",

README.md

@@ -24,2 +24,3 @@ [![npm version](https://badge.fury.io/js/@justinribeiro%2Flite-youtube.svg)](https://badge.fury.io/js/@justinribeiro%2Flite-youtube) ![min+gzip](https://img.shields.io/badge/min%2Bgzip-2.2kb-blue) ![min+br](https://img.shields.io/badge/min%2Bbr-1.7kb-blue) [![](https://data.jsdelivr.com/v1/package/npm/@justinribeiro/lite-youtube/badge)](https://www.jsdelivr.com/package/npm/@justinribeiro/lite-youtube)
 - _new in v1.4_: Adds `short` attr for enabling experimental YouTube Shorts mobile interaction support. See (example video)[https://www.youtube.com/watch?v=aw7CRQTuRfo] for details.
+- _new in v1.5_: Adds support for nonce attribute via `window.liteYouTubeNonce` for CSP 2/3 support.
 
@@ -50,3 +51,3 @@ ## Install via package manager
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.5.0/lite-youtube.js"></script>
 ```
@@ -60,2 +61,51 @@
 
+## Basic Usage with Fallback Link
+
+A fallback appears in any of the following circumstances:
+
+1. Before the compontent is initialized
+1. When JS is disabled (like `<noscript>`)
+1. When JS fails or the lite-youtube script is not loaded/executed
+1. When the browser doesn't support web components
+
+```html
+<lite-youtube videoid="guJLfqTFfIw">
+  <a class="lite-youtube-fallback" href="https://www.youtube.com/watch?v=guJLfqTFfIw">Watch on YouTube: "Sample output of devtools-to-video cli tool"</a>
+</lite-youtube>
+```
+
+Example CSS:
+
+```css
+.lite-youtube-fallback {
+	aspect-ratio: 16 / 9; /* matches YouTube player */
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	gap: 1em;
+	padding: 1em;
+	background-color: #000;
+	color: #fff;
+	text-decoration: none;
+}
+
+/* right-facing triangle "Play" icon */
+.lite-youtube-fallback::before {
+	display: block;
+	content: '';
+	border: solid transparent;
+	border-width: 2em 0 2em 3em;
+	border-left-color: red;
+}
+
+.lite-youtube-fallback:hover::before {
+	border-left-color: #fff;
+}
+
+.lite-youtube-fallback:focus {
+	outline: 2px solid red;
+}
+```
+
 ## Playlist Usage
@@ -66,6 +116,6 @@
 ```html
-  <lite-youtube
-    videoid="VLrYOji75Vc"
-    playlistid="PL-G5r6j4GptH5JTveoLTVqpp7w2oc27Q9"
-  ></lite-youtube>
+<lite-youtube
+  videoid="VLrYOji75Vc"
+  playlistid="PL-G5r6j4GptH5JTveoLTVqpp7w2oc27Q9"
+></lite-youtube>
 ```
@@ -72,0 +122,0 @@

No alert changes

Improved metrics

Total package byte prevSize

43240

increased by5.83%

Lines of code

321

increased by0.31%

Number of lines in readme file

225

increased by28.57%

Is type module

Yes

No dependency changes