Actually use progressive enhancement with a link rather than button (#…

…117)
paulirish · Jan 28, 2022 · 5dfa1ab · 5dfa1ab
1 parent 79f21ea
commit 5dfa1ab
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/src/lite-yt-embed.css b/src/lite-yt-embed.css
@@ -43,6 +43,7 @@ lite-youtube > iframe {
 
 /* play button */
 lite-youtube > .lty-playbtn {
+    display: block;
     width: 68px;
     height: 48px;
     position: absolute;

diff --git a/src/lite-yt-embed.js b/src/lite-yt-embed.js
@@ -95,8 +95,9 @@ class LiteYTEmbed extends HTMLElement {
         LiteYTEmbed.preconnected = true;
     }
 
-    addIframe() {
+    addIframe(e) {
         if (this.classList.contains('lyt-activated')) return;
+        e.preventDefault();
         this.classList.add('lyt-activated');
 
         const params = new URLSearchParams(this.getAttribute('params') || []);

diff --git a/variants/pe.html b/variants/pe.html
@@ -7,14 +7,14 @@
   <link rel="stylesheet" href="../src/lite-yt-embed.css" />
 </head>
 <body>
-<h1>progressively enhanced</h1>
+<h1>Progressively Enhanced</h1>
 <p>After 2 seconds, the JS is executed and custom element defined.</p>
 <p id="done">...</p>
 
 <lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
-  <button type="button" class="lty-playbtn">
+  <a href="https://youtube.com/watch?v=ogfYd705cRs" class="lty-playbtn" title="Play Video">
     <span class="lyt-visually-hidden">Play Video: Keynote (Google I/O '18)</span>
-  </button>
+  </a>
 </lite-youtube>
 
 <script>