Fix lty- typo, but keep fallback around to avoid breakage

Fixes #65

Author: paulirish

readme.md

@@ -45,7 +45,7 @@ Use this as your HTML, load the script asynchronously, and let the JS progressiv
 
 ```html
 <lite-youtube videoid="goiWrNiaT0I" style="background-image: url('https://i.ytimg.com/vi/goiWrNiaT0I/hqdefault.jpg');">
-  <a href="https://youtube.com/watch?v=goiWrNiaT0I" class="lty-playbtn" title="Play Video">
+  <a href="https://youtube.com/watch?v=goiWrNiaT0I" class="lyt-playbtn" title="Play Video">
     <span class="lyt-visually-hidden">Play Video: Crayon Physics Deluxe - Trailer HD</span>
   </a>
 </lite-youtube>

src/lite-yt-embed.css

@@ -52,7 +52,7 @@ lite-youtube > iframe {
 }
 
 /* play button */
-lite-youtube > .lty-playbtn {
+lite-youtube > .lyt-playbtn {
     display: block;
     /* Make the button element cover the whole area for a large hover/click target… */
     width: 100%;
@@ -69,8 +69,8 @@ lite-youtube > .lty-playbtn {
     border: 0;
 }
 
-lite-youtube:hover > .lty-playbtn,
-lite-youtube .lty-playbtn:focus {
+lite-youtube:hover > .lyt-playbtn,
+lite-youtube .lyt-playbtn:focus {
     filter: none;
 }
 
@@ -79,7 +79,7 @@ lite-youtube.lyt-activated {
     cursor: unset;
 }
 lite-youtube.lyt-activated::before,
-lite-youtube.lyt-activated > .lty-playbtn {
+lite-youtube.lyt-activated > .lyt-playbtn {
     opacity: 0;
     pointer-events: none;
 }

src/lite-yt-embed.js

@@ -14,7 +14,7 @@ class LiteYTEmbed extends HTMLElement {
     connectedCallback() {
         this.videoId = this.getAttribute('videoid');
 
-        let playBtnEl = this.querySelector('.lty-playbtn');
+        let playBtnEl = this.querySelector('.lyt-playbtn,.lty-playbtn');
         // A label for the button takes priority over a [playlabel] attribute on the custom-element
         this.playLabel = (playBtnEl && playBtnEl.textContent.trim()) || this.getAttribute('playlabel') || 'Play';
 
@@ -34,7 +34,8 @@ class LiteYTEmbed extends HTMLElement {
         if (!playBtnEl) {
             playBtnEl = document.createElement('button');
             playBtnEl.type = 'button';
-            playBtnEl.classList.add('lty-playbtn');
+            // Include the mispelled 'lty-' in case it's still being used. https://github.com/paulirish/lite-youtube-embed/issues/65
+            playBtnEl.classList.add('lyt-playbtn', 'lty-playbtn');
             this.append(playBtnEl);
         }
         if (!playBtnEl.textContent) {

testpage/poster-image-summary.html

@@ -117,6 +117,7 @@
     "saaTXQ7E3Lw",
     "bJcTWr8-mFo",
     "jWur1VrxNUg",
+    "UMPhhk1K_9s", // artifacts are BAD in hqdefault jpeg
     "b52cfb6lweU",
     "svEuG_ekNT0",
     "goiWrNiaT0I",

variants/pe.html

@@ -12,7 +12,7 @@ <h1>Progressively Enhanced</h1>
 <p id="done">...</p>
 
 <lite-youtube videoid="goiWrNiaT0I" style="background-image: url('https://i.ytimg.com/vi/goiWrNiaT0I/hqdefault.jpg');">
-  <a href="https://youtube.com/watch?v=goiWrNiaT0I" class="lty-playbtn" title="Play Video">
+  <a href="https://youtube.com/watch?v=goiWrNiaT0I" class="lyt-playbtn" title="Play Video">
     <span class="lyt-visually-hidden">Play Video: Crayon Physics Deluxe - Trailer HD</span>
   </a>
 </lite-youtube>