Add a video to a ReactJS app and make it visible on the view

Question

I am currently generating a landing page, and I have been trying to figure it out how to add a video in multiple formats (for browser compatibility)

I am new in the ReactJS world, your help will be truly appreciated!

Here is my code:

I generated a component for the video (I'm not sure if this is the best thing I could do)

import React, { Component } from "react";
import video1 from "./video/vd1.mp4";
import video2 from "./video/vd2.ogv";
import video3 from "./video/vd3.webm";

class Video extends Component {
  render() {
    return (
      <div>
        <video src={video1} />
      </div>
    );
  }
}

export default Video;

And I have also this file that is where I want to place the video:

import React, { Component } from "react";
import { PageHeader } from "react-bootstrap";
import Video from "./Video";

class Content extends Component {
  render() {
    return (
      <div>
        <PageHeader className="title">
          <video src={Video} autoPlay="true" />
          <small>Welcome to</small> <br />
          Profile Pulse
        </PageHeader>
      </div>
    );
  }
}

export default Content;

Of course, this way of doing it is giving me zero results, so what would it be the best way to make the video appear on my landing page?

Solution

This should work,

Change <video> tag of Video component to

<video src={video1} width="600" height="300" controls="controls" autoplay="true" />

Change <Content>'s <video src={Video} autoPlay="true" /> to

<Video />

Comments

[Admin]

Thanks a lot! I tried that and the video stills not showing up, will that be maybe because of the format? I know, because I've done that before when using HTML and CSS and I insert other formats as well for browser compatibility, those formats are: ogv and webm, do you think that might help the video to be displayed, and how could that be implemented in the components?

[midnightgamer]

try with image first , if this structure worked with image , than it will definitely work for video.

[Admin]

But how would it be the structure with image?

[midnightgamer]

instead of video use image , import a image as you imported a video in video component and other will be same just use image instead of video , if image appear in out , this will work for video too