search

sampotts / plyr

A simple HTML5, YouTube and Vimeo player
https://plyr.io
MIT License
26.59k stars 2.93k forks source link

Strange behavior with progresive-enhanced iframe #2610

Open jwdevel opened 1 year ago

jwdevel commented 1 year ago

Expected behaviour

When I use a plain <iframe> for a YouTube video, and add Plyr support via plyr__video-embed (and relevant JS), I'd expect that the element still looks good for visitors who have Javascript disabled.

Actual behaviour

Instead, the styling of that <iframe> gets messed up until the Plyr JS code runs. The element is stretched to the full width of the window (as far as I can tell).

The approach used matches the documentation's recommendation for "progressive enhancement," so it seems especially odd that it behaves poorly when there's no Javascript running. Compare to the plain <iframe> approach (no plyr__video-embed), where lack of Javascript does not mess with the element's size, and displays a simple message from YouTube about needing javascript.

Steps to reproduce

Here is a minimal page that shows the issue. You can save locally and view in your browser (I am using FF 102.6.0esr 64-bit).

<!doctype html>
<html lang="en">
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
  </head>
  <body>
    <div style="width:500; height:2000px; background:green">
    This is the embedded bit:
      <div style="width:300px; height:200px; background:blue">
        <!-- remove this CSS class, and it looks good, even with JS disabled. -->
        <div class="plyr__video-embed" id="player">
          <iframe
            src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
            allowfullscreen
            allowtransparency
            allow="autoplay"
            ></iframe>
        </div>
      </div>
    </div>
<script src="https://cdn.plyr.io/3.7.3/plyr.polyfilled.js"></script>
<script>
  // This simulates "javascript disabled" visitors.
  // Un-comment this line, and it looks good again.
  // You can also un-comment this line, then disable JS in your browser, for the same (bad) effect.
  //const player = new Plyr('#player');
</script>
  </body>
</html>

Environment

Console errors (if any)

None relevant. I do see some from YouTube, since I'm running off of the local filesystem.

jwdevel commented 1 year ago

Update: the below doesn't actually seem to be necessary. In fact, in my real setup, it causes a (wrong) 16:9 ratio to be forced on plain <video> embeds, weirdly...

old note:

Note: as a workaround, the following seems to be okay:

  1. Remove the pyr__video-embed from the element markup.
  2. Before instantiating Plyr, add that class to the element. Eg:
var elem = document.getElementById('player');
elem.classList.add("plyr__video-embed");

// ...

const player = new Plyr('#player');