title: Add a video to a ReactJS app and make it visible on the view
body: <p>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)</p>
  
  <p>I am new in the ReactJS world, your help will be truly appreciated!</p>
  
  <p>Here is my code:</p>
  
  <p>I generated a component for the video (I'm not sure if this is the best thing I could do)</p>
  
  <pre><code>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 (
        &lt;div&gt;
          &lt;video src={video1} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Video;
  </code></pre>
  
  <p>And I have also this file that is where I want to place the video:</p>
  
  <pre><code>import React, { Component } from "react";
  import { PageHeader } from "react-bootstrap";
  import Video from "./Video";
  
  class Content extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;PageHeader className="title"&gt;
            &lt;video src={Video} autoPlay="true" /&gt;
            &lt;small&gt;Welcome to&lt;/small&gt; &lt;br /&gt;
            Profile Pulse
          &lt;/PageHeader&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Content;
  </code></pre>
  
  <p>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?</p>