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.
CardMedia Image Example
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.
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.
Embedding Links
A link is embedded just like a YouTube video:
<CardMedia
component="iframe"
src="https://smartdevpreneur.com/tailoring-the-material-ui-card-component/"
/>
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!
My MUI course on Udemy is now available!!! Build a full MUI app from beginning to end, learn every aspect of the sx prop, styled API, and the theme, and tackle the most challenging components! Do you want an active Q&A with me?!? Check here for coupons for my MUI course on Udemy.
