Fix video width #457
No reviewers
Labels
No labels
accessibility
app-parity
area: creator
area: daemon
area: design
area: devops
area: discovery
area: docs
area: installer
area: internal
area: livestream
area: performance
area: proposal
area: reposts
area: rewards
area: search
area: security
area: subscriptions
area: sync
area: ux
area: viewer
area: wallet
BEAMER
channel
comments
community PR
consider soon
core team
css
dependencies
electron
Epic
feature request
first-timers-only
good first issue
hacktoberfest
help wanted
hub-dependent
icebox
Invalid
level: 0
level: 1
level: 2
level: 3
level: 4
merge when green
needs: exploration
needs: grooming
needs: priority
needs: repro
needs: tech design
notifications
odysee
on hold
playlists
priority: blocker
priority: high
priority: low
priority: medium
protocol dependent
recsys
redesign
regression
resilience
sdk dependent
Tom's Wishlist
trending
type: bug
type: discussion
type: improvement
type: new feature
type: refactor
type: task
type: testing
unplanned
windows
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference: LBRYCommunity/lbry-desktop#457
Loading…
Add table
Reference in a new issue
No description provided.
Delete branch "patch-3"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
The real problem is not the alignment but the the width of the
video
element.Since it's using a container there is no need forposition: absolute
,setting the width to
100%
should do the trick 😄Fixes
Fix: https://github.com/lbryio/lbry-app/issues/419
Prevent regression: #295
I can't request reviews 😞 ^^
Wouldn't this cause horizontal stretching that would look odd on narrow pictures?
@jsigwart Nope, because it's using
object-fit: contain;
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
I think what you want to do is this:
@btzr-io Could you give a look here.
@jsigwart you don't need
margin: 0 auto
Yup, you're exactly right. And that should fix the case of a video being too short, too.
This is further along and with a better explanation, so I'm inclined to keep this. Also I'm linking some important comments from that PR to here so the discussion can continue here.
Comment#1
As for it being rendered inside multiple
<div>
tags, it could be because of the way react handles components(everything can be returned only in a single wrapper tag).Well this is the most easy fix,
not sure if someone want to go deep inside that react component
to figure out what's casing that behavior and if it's really necessary ^^
I did a quick look, and didn't find nothing wrong with
video
component,so that means
css
is the right fix ^^