dollarshaveclub / reframe.js

🖼 Reframe unresponsive elements responsively.

Home Page:https://github.com/yowainwright/reframe.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

YouTube events and data api

davidosomething opened this issue · comments

  • embed two youtube videos
  • bind youtube events onstatechange
  • enable reframe on the videos

do the onstatechange events still fire reliably?
fitvids.js has this problem where youtube video onstatechange events no longer fire because the original player was removed from the DOM and then re-added (which it looks like reframe does too)

Hmm. Good question. This would be possible if any particular element were wrapped (prior) in a data-reframe attribute of sorts.

@davidosomething That's a great catch. We're discussing the best way to approach this issue. Do you have any thoughts?

maybe it's just something to caveat in the README or site

but if you want to implement something, one way is to add an option that when enabled:

  • check if the YT api (window.YT) has loaded
    • if not, all is good and the reframe will happen before onStateChange is bound to the iframe
    • if yes, check the iframe being reframed is a youtube iframe (via player = window.YT.get('iframeId'); where player would be undefined or a YT.Player
      • if yes player.destroy() prior to reframing. Then when the new iframe is re-embedded into DOM, it will call the user's custom window.onYouTubeIframeAPIReady and there will not a zombie YT.Player for that iframeId

@davidosomething that's great. I've been planning on starting a docs folder with examples. I'll make sure to document this issue & have some sort of solution/idea example. If you have any other issues/notes - please share.

In regards to more options: I think adding options rather than solutions/ideas would take away from the simplicity of reframe.js.

if not more options then maybe provide different compilations

the reason i say to tuck it behind an option is that some sites may not have an idempotent window.onYouTubeIframeAPIReady, so when you destroy it you'd break their site behavior.

It's a problem that comes from the way youtube data api works (and an issue they probably don't fully investigate https://www.google.com/search?q=youtube+onstatechange+not+firing esp https://code.google.com/p/gdata-issues/issues/detail?id=4706), and youtube is probably the major use case for this reframe so people are sure to have some hacks on their onYouTubeIframeAPIReady like re-binding events onReady instead of onStateChange or something

I'm definitely considering different compilations. I appreciate your insights greatly @davidosomething.

@davidosomething we're reviewing a pr I've made to better support the issue you brought up (thanks). I may ask for you some of your feedback for npmignore'd docs based on the issue you purposed.

@davidosomething I think noframe will do what you & I'm sure others will want. A deep thanks for your notes & feedback! 🙏