paulirish / lite-youtube-embed

A faster youtube embed.
https://paulirish.github.io/lite-youtube-embed/
Other
5.68k stars 260 forks source link

Play button bug when using progressive enhancement pattern #123

Closed delucis closed 1 year ago

delucis commented 2 years ago

The documented progressive enhancement pattern adds a link inside the custom element to allow users to click through to the YouTube video even without JavaScript.

I’m seeing a bug where after the JS loads, the play button continues to link to YouTube, so clicking it navigates away from the page. (Clicking anywhere else on the poster image works as expected.)

In a couple of experiments I could fix this either by

  1. Removing the href from the play button in the connectedCallback:

    playBtnEl.removeAttribute('href');
  2. Calling preventDefault in the click handler:

    this.addEventListener('click', (e) => {
      e.preventDefault();
      this.addIframe();
    });

PR #124 implements the first of these approaches.