Four Examples of Using Material-UI CardMedia

Material-UI’s Card component has an aptly named composite component named CardMedia. As you likely guessed, it is intended to contain various kinds of media: video, audio, image, picture, and iframe.

The CardMedia component is most commonly used for images, according to my keyword research. That’s not a surprise, but I still thought it would be useful to demonstrate several media types.

As a side note, if you are interested in a Udemy training course on Material-UI, check out my review of the best Material-UI course on Udemy, which has 40+ hours of content and a 30-day money back guarantee. I think the value proposition of this course is simply incredible.

CardMedia Image Example

Material-UI CardMedia Image

CardMedia makes it delightfully easy to display an image inside a card component. The most important props are component and image. I placed them first in the code below:

<CardActionArea>
  <CardMedia
    component="img"
    image="https://picsum.photos/400/300"
    alt="CardMedia Image Example"
    height="140"
    title="CardMedia Image Example"
  />
</CardActionArea>

Setting component="img" resulted in an image that autosized to the available space. Theoretically, component="picture" is even more responsive because you can feed it several values and it uses the best fit.

The image prop specifies the source of the image. There is also a src prop; it is simply an alias of the image prop. I expect MUI added src because that is how html specifies resource locations.

The CardMedia component is unusual in Material-UI because there are a handful of props available depending on what value the component prop is set to. For example, alt, height, and title are available for img components. We’ll see below that video has several unique props available as well. Strangely, the docs don’t mention these props and you have to do some research to find them.

I wrapped this particular CardMedia component in a CardActionArea wrapper. This added click action and styling to the image. If you want to add actionable components to the bottom of a card, take a look at the CardActions component.

CardMedia Video Example

I was disappointed by the video component. I think most would expect it to be able to play embedded videos, such as from YouTube. However, it is intended for playing locally hosted videos stored on your server. If you want to embed a video, use component="iframe" (more on this below).

<
  CardMedia
  component="video" 
  autoPlay 
  controls 
  src="./myfile.mp4"
/>

Once again, the “video” option has props that aren’t specified in the docs. The controls prop gives play/pause and other options, while autoPlay does exactly what it sounds like. Take a look at the image below.

Material-UI CardMedia Video

CardMedia IFrame Examples

In my experience, many devs cringe when they hear “iframe”. However, in the Material-UI CardMedia component, iframe is quite useful. I have two examples below, one with an embedded YouTube video and the other with an embedded site.

Remember to take a look at the Code Sandbox in the Resources section in order to see these live.

Embedding YouTube Videos

<CardMedia
  component="iframe"
  image="https://www.youtube.com/embed/muuK4SpRR5M"
/>

With two props you can embed a video. A nice thing about embedding YouTube is that the controls are in the embed, they don’t need to be specified with a prop.

Material-UI CardMedia YouTube IFrame

Embedding Links

A link is embedded just like a YouTube video:

<CardMedia
  component="iframe"
  src="https://smartdevpreneur.com/tailoring-the-material-ui-card-component/"
/>
Material-UI CardMedia IFrame

In this case I chose to place the CardMedia after the CardContent component; it works fine and there are no restrictions on the ordering of most of the internal Card components.

Naturally you will want to set the size of the CardMedia. If you want to adjust the width, it’s best done with css at the class level. If you want to control height, set the height prop on the CardMedia component. The iframe or image can be centered by adding a class to CardMedia with the following styling:

media: {
  width: "80%",
  margin: "auto"
}

For more info, here is a deep dive into styling Material-UI Card.

Resources

I left the CardHeader empty in these demos, but here is an example of CardHeader with every prop enabled.

Expand your JavaScript knowledge with these free 50 difficult JavaScript questions!

Code Sandbox Link

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.