How to use Video html tag instead of img tag in material-ui Card Component

Question

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?

Solution 1

To use video in your react component you can use the below package

https://github.com/CookPete/react-player

to use it just follow the below guide,

npm install react-player --save

import React, { Component } from 'react'
import ReactPlayer from 'react-player'

class App extends Component {
  render () {
    return <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing />
  }
}

you can get the documentation from their repo,

Solution 2

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

Solution 3

The example above will only work for a video coming from your server, otherwise, you will get a CORB error.

For a video from another site use:

<CardMedia 
          component="iframe"
          height="140"
          image="https://....mp4"
          title="Contemplative Reptile" />

Solution 4

Very Easy

<CardMedia 
  component="video"
  height="140"
  image="/static/images/cards/contemplative-reptile.mp4"
  title="Contemplative Reptile" 
/>

View more solutions