Menu
I am trying to embed a video to my page using Material-ui Card component as follows:
const CardExampleWithAvatar = () => (
<Card>
<CardMedia
overlay={<CardTitle title="Overlay title" subtitle="Overlay subtitle" />}
>
<video>
<source src="https://www.youtube.com/watch?v=abcdef" type="video/mp4"/>
</video>
</CardMedia>
<CardTitle title="Card title" subtitle="Card subtitle" />
<CardText>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
</CardText>
<CardActions>
<FlatButton label="Action1" />
<FlatButton label="Action2" />
</CardActions>
</Card>
);
export default CardExampleWithAvatar;
The example in the documentation is using 'img' tag to display image in the card. But I am using 'video' tag as above. Other elements are rendering in my page but, the video is not displaying in the page? Am I missing something? Or there is different way of using video tags in material-ui?
954
Step 1: Create a React application using the following command. Step 2: After creating your project folder i.e. foldername, move to it using the following command. Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.
You need to call an onClick event inside the Card component. Then if you need to pass some props, or use logic, just pass the function/content in the prop to Card . Something like that - <Card handleClick={this. handleClickMethod} /> .
Images. The Card supports to include images within the elements, you can add image as direct element anywhere inside card root by adding the e-card-image class to div element. Using the class defined, you can write CSS styles to load images to that element.
Open your terminal, and ensure that you are inside your application's master folder. Type npm install @material-ui/core in the terminal and click enter. Run the command below to use Material-UI icons in our project. We can confirm that the above dependencies have been installed by checking in the package.
I found this one recently, specificaly for YOUTUBE
<CardMedia
component='iframe'
title='test'
src='https://www.youtube.com/embed/VIDEO_ID'
/>
Replace the VIDEO_ID withe the actual video's id that is desired
Material UI core version being used at this moment is - 4.9.5
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
