-
-
Notifications
You must be signed in to change notification settings - Fork 32.6k
Description
When CardMedia
is provided with a component
prop of 'video', 'audio', 'picture', 'iframe', or 'img', Material UI automatically adds the following styles to the component:
/* Styles applied to the root element if `component="video, audio, picture, iframe, or img"`. */
media: {
width: '100%',
objectFit: 'cover',
},
This is good for image components, but not good for embedded iframes with video. Specifically, on iOS, the video no longer stretches from edge to edge, but only to about 80% of the width, the remaining 20% is blank.
The standard styling for an iframe to show a 16:9 aspect ratio video is shown below:
root: {
position: 'relative',
paddingBottom: '56.25%', // 16:9 aspect ratio
paddingTop: 25,
height: 0
},
frame: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
}
Note that width is already set to 100% and there should be no objectFit
style applied.
My suggestion is to remove the addition of width
and objectFit
styles in case of iframe CardMedia components.
- This is not a v0.x issue.I have searched the issues of this repository and believe that this is not a duplicate.To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
Expected Behavior 🤔
Video should stretch edge to edge on all browsers including iOS.
Current Behavior 😯
On iOS, video only stretches to about 80% of the width.
Steps to Reproduce 🕹
See this working demo on iOS (Chorme and/or Safari). You should see a blank area on the right.
Here's the source code for that demo:
https://codesandbox.io/s/cardmedia-ios-issue-pxjrk
Your Environment 🌎
Tech | Version |
---|---|
Material-UI | v4.1.3 |
React | 16.8.6 |
Browser | iOS Chrome or Safari |
TypeScript | 3.4.5 |
etc. |
Activity
oliviertassinari commentedon Jun 26, 2019
@nareshbhatia Interesting, regarding the width prop, it seems to help. What's the harm? I can reproduce the object-fit issue. I'm wondering, what's the behavior when providing a video or audio element?
Here is one possible approach:
Another one:
Do you have a specific implementation in mind?
nareshbhatia commentedon Jun 26, 2019
@oliviertassinari no harm in adding
width: 100%
, it's just that for getting the standard 16:9 aspect ratio, I would have to supply the additional styles to the frame anyway:The above styles happen to be a defacto standard for the getting videos in iframes (google for it and you will get multiple hits with the same answer), so I wouldn't want half the styles in CardMedia and other half in application code. TL;DR - no harm in setting
width: 100%
in CardMedia.As for
objectFit: fill
, I have mixed feelings. Give the standard set of styles above, there is no need for objectFit at all, so why add an unnecessary style. I can't tell in which use case it may fail.The reason I am leaning towards CardMedia not adding anything additional for iframe is that the current approach of adding these styles automatically came as a total surprise. It took quite a lot of time to debug (literally had to download the iOS simulator to see which style was causing the issue).
If I were to choose between your proposed approaches, I would go with the first. But I would still prefer the approach where CardMedia adds nothing for iframe and lets the app decide what it wants - it gives better control with no surprises.
P.S. I have not played with video and audio elements.
oliviertassinari commentedon Jun 26, 2019
My preferred approach so far is the last one. I like how it doesn't introduce any breaking change, and how it only applies the necessary style properties.
What's wrong with the introduction of a
img
style rule?nareshbhatia commentedon Jun 26, 2019
I am good with the second approach too - introduction of an
img
rule. We just need to document what each component type is doing to the styling.oliviertassinari commentedon Jun 26, 2019
OK great, unless somebody has a better proposal, we can go for it. My concern with the initial proposal is the breaking change impact potential. Maybe I'm wrong, it's not a BC?
neon98 commentedon Sep 26, 2019
@oliviertassinari I'd like to work on this.
joshwooding commentedon Sep 26, 2019
@neon98 I know you asked Olivier but it would be great if you worked on it :) Let us know if you need any help.
neon98 commentedon Sep 26, 2019
hey @joshwooding! I've submitted the PR with suggested changes. Feel free to look into it.