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.

Sign up for GitHub

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

Jump to bottom

Make videos resizable and other CSS improvements #104

Merged
merged 13 commits into from
Jun 14, 2021
Merged

Make videos resizable and other CSS improvements #104

merged 13 commits into from
Jun 14, 2021

Conversation

rhansen
Copy link
Member

@rhansen rhansen commented Jun 14, 2021 •
edited
Loading

Multiple commits:

  • Set video element box-sizing to content-box
  • Delete unused .error-msg style
  • Move colored border to .video-container
  • Remove nearly imperceptible border radius
  • Set a minimum height for .video-container
  • Draw a small black border around the video
  • Delete syntactically invalid @media at-rule
  • Prevent .video-container from shrinking below video size
  • Rely on CSS to put the self-view first
  • Tweak #rtcbox flex growth/shrink
  • Delete redundant justify-content rule
  • Automatically size the video element
  • Make videos user-resizable

Fixes #58

cc @packardone

rhansen added 13 commits June 13, 2021 21:46
@rhansen
Set video element box-sizing to content-box
ec2ca1d 
This fixes weird resizing caused by the 5px left border.
@rhansen
Delete unused .error-msg style
855f659
@rhansen
Move colored border to .video-container
6dc2573
@rhansen
Remove nearly imperceptible border radius
787c503
@rhansen
Set a minimum height for .video-container
0463e0d 
This prevents the name from covering up the controls.
@rhansen
Draw a small black border around the video
40b606b 
This makes it easier to find the controls if the video is mostly
white.
@rhansen
Delete syntactically invalid @media at-rule
b33e310
@rhansen
Prevent .video-container from shrinking below video size
48528a5
@rhansen
Rely on CSS to put the self-view first
fb377ec 
This reverts commit ac9c648.
@rhansen
Tweak #rtcbox flex growth/shrink
c8ab301
@rhansen
Delete redundant justify-content rule
5fdff28
@rhansen
Automatically size the video element
fde4f4d
@rhansen
Make videos user-resizable
97b49c5 
It's not the best UX, but it's better than nothing. Limitations:
  * The user can only resize by dragging from the lower-right corner
    of the video.
  * The drag handle is not very visible.
  * To keep the aspect ratio of the `.video-container` constant, the
    div is only horizontally resizable and the vertical size is set to
    auto. This makes dragging a bit awkward.

Note that users can still use the browser's picture-in-picture feature
to pop out the video and position/resize it however they want.
@rhansen rhansen merged commit 97b49c5 into master Jun 14, 2021
@rhansen rhansen deleted the rhansen-style branch June 14, 2021 04:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Custom Video Size - Draggable
1 participant
@rhansen