Skip to content

[CardMedia] objectFit: cover is not appropriate for iframe #16377

@nareshbhatia

Description

@nareshbhatia

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.

https://pxjrk.csb.dev/

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug 🐛Something doesn't workcomponent: cardThis is the name of the generic UI component, not the React module!good first issueGreat for first contributions. Enable to learn the contribution process.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions