-
-
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.
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. |