Why does the player reset when only the dimensions have changed?

[dancancro]

If I pass in opts.width and opts.height, and they change while the player is playing, the player completely resets. I modified the code to keep this from happening and it works fine. Was there some rationale behind having it work this way?

[ruisaraiva19]

@dancancro I don't think there is a rationale behind having opts.width and opts.height triggering a player reset. @tjallingt please let us know if you disagree.

@dancancro Can you open a PR with this small change 🙏 ?

[tjallingt]

If we can avoid resetting we definitely should, probably never encountered this issue because I usually set width and height to 100%

[dancancro]

I can do a pull request but I'm stuck. My editor, VSCode, is removing spaces after "if"s and "switch"es. How do I get my editor, VSCode, to not automatically apply eslint fixes on save? This code in .vscode/settings.json isn't doing it...

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false
  }
}

[ruisaraiva19]

@dancancro you can save changes without formating your code by running the VSCode command called File: Save without Formatting.

[dancancro]

I don't know how to run a VSCode command. I see menus and menu items that I can click. I don't see a menu item for saving without formatting.

[ruisaraiva19]

You can run "Command + Shift + P" to open the Command Palette and type "save without" until you see "File: Save without Formatting" command and use that.

[dancancro]

How do I fix this pull request? It's complaining about the format of the commit message of a previous commit.

[github-actions]

🎉 This issue has been resolved in version 7.13.1-canary.3 🎉

The release is available on:

• GitHub release
• npm package (@canary dist-tag)

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 7.13.2-canary.1 🎉

The release is available on:

• GitHub release
• npm package (@canary dist-tag)

Your semantic-release bot 📦🚀

[dancancro]

I installed the new version and it still has this problem. When the player is resized while playing, it stops playing.

[github-actions]

🎉 This issue has been resolved in version 7.14.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

[dancancro]

@tjallingt I tried it again. It's not fixed. The player restarts when you resize the window.

[dancancro]

@tjallingt I somehow earlier missed the workaround you posted for setting height and width to 100% and then presumably having the containing element control the dimensions. That's reasonable, but there is an intervening div whose dimensions can't be set. This means that the iframe will fill the specified width but not the specified height. I tried setting height and width of the Youtube component's style, but the Youtube component only accepts a className, not a style. Is that a shortcoming that can be corrected?

Since you mentioned that by setting the height and width to 100% you hadn't encountered this problem, I suspect that you did something else to handle dynamically changing dimensions. If so, what was that?

[dancancro]

@tjallingt okay, this is very odd. I tried setting the Youtube component's className to "youtube-player" and defining

.youtube-player {
  height: inherit;
}

and instead of putting this class on the containing div, it rendered simply <div class>, and put the "youtube-class" on the iframe` instead, thus nullifying this height inheritance. It's almost as if this was done on purpose to prevent the control of the player's height this way. So strange.

[dancancro]

@tjallingt okay, this is weird but works. I added the class to the outer div too.

 <div className="youtube-player" style={{ height: thumbnailed ? thumbHeight : height, width: thumbnailed ? thumbWidth : width }}>
  <YouTube videoId={videoId} 
          className="youtube-player" 
          opts={{
             height: '100%',
             width: '100%',
             playerVars: {
                autoplay: autoplay ? 1 : 0,
                start: start === null ? null : +start,
                end: end === null ? null : +end
          }
         }} 
        onReady={onPlayerReady(video)}
        onStateChange={onPlayerStateChange(video)} />
</div>
<style>
.youtube-player, .youtube-player > div {
  height: inherit;
}
</style>