Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Control bar layout issues when player width is small #1733

Closed
OwenEdwards opened this issue Dec 10, 2014 · 4 comments
Closed

Control bar layout issues when player width is small #1733

OwenEdwards opened this issue Dec 10, 2014 · 4 comments

Comments

@OwenEdwards
Copy link
Member

I understand that support for the tag is not complete (#537), but just wanted to flag that the control bar does not layout correctly (I'm using Chrome Version 39.0.2171.71 on Win 7) when playing audio. Specifically, the Mute button gets dropped below the control bar unless the width is specified; see this from @tim-peterson's demo at http://tim-peterson.github.io/videojs-playlist/.

video.js <audio> controbar layout issue

Also, if the "poster" is not present in the HTML, it seems like the window size should just be the controlbar size, and the Fullscreen button should be omitted.

@gkatsev
Copy link
Member

gkatsev commented Dec 10, 2014

Oh, weird, in that particular case, the 'LIVE' control is still to the right of the duration, though, not visible. It shouldn't be taking up any room at all, if possible, i.e., display:none. That solves this particular issue. However, if the player was any smaller, there was nothing we could've done.

This also brings about two other issues I've noticed:

  • we should probably overflow: hidden things in the videojs div.
  • the poster image should toggle playback state for audio.

@mmcc mmcc added the confirmed label Dec 10, 2014
@mmcc mmcc changed the title When playing <audio>, Video.JS control bar does not layout correctly Control bar layout issues when player width is small Dec 10, 2014
@mmcc
Copy link
Member

mmcc commented Dec 10, 2014

Agreed on the poster thing, not sure I agree on the overflow: hidden bit. I don't see why it would cause much trouble, but I think we should probably default to disabling things like the fullscreen toggle button for audio sources. I personally don't often find the need to fullscreen a static poster image, but I could be in the minority there.

I hacked together a super hacky audio-only skin a while back. Might be interesting to revisit the basic concept since there are some issues with just showing the control bar of the default skin.

Updating the issue title since technically this would happen even if there was a video playing at low width.

@mmcc mmcc added the bug label Dec 10, 2014
@mmcc
Copy link
Member

mmcc commented Jan 30, 2015

FWIW, the new base theme layout doesn't have this issue. I'm kicking around the idea of player size, so we can automatically hide elements when a player goes below a certain width. Think similar to media-queries, but we basically have to implement them ourselves since we only care about the width of the player component and not window.

@mmcc
Copy link
Member

mmcc commented Jun 4, 2015

This should be fixed in the most recent skin.

@mmcc mmcc closed this as completed Jun 4, 2015
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants