title: ReactJS component HTML5 video
body: <p>I am trying to have have video in my web page using HTML <code>&lt;video&gt;</code> tag using ReactJS and JSX. Right now nothing is playing even though my component has the path to the file</p>
  
  <p>IntroVideo this.props:</p>
  
  <pre><code>{
    introVideo: "assets/media/Cherngloong_website_intro_Uz921bT.mp4",
    muted: "true"
  }
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>class IntroVideo extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
          };
      }
  
      render() {
          return(
              &lt;div&gt;
                  &lt;video className="video-container video-container-overlay" autoPlay="true" loop muted={ this.props.muted }&gt;
                      &lt;source src={ this.props.introVideo } type="video/mp4" /&gt;
                  &lt;/video&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Here is what I see in the developer tools:</p>
  
  <pre><code>&lt;video class="video-container video-container-overlay" autoplay="" loop="" muted="" data-reactid=".0.1.0.0"&gt;
      &lt;source type="video/mp4" data-reactid=".0.1.0.0.0" src="assets/media/Cherngloong_website_intro_Uz921bT.mp4"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>In the developer tools, if I right click the <code>src</code> value and click on <code>"Open link in new tab"</code>, the video would play in the new tab. So I believe it the path to the file is correct.</p>
  
  <p>I am doing the same thing for another Component but it is for an image and it works fine:</p>
  
  <p>About this.props:</p>
  
  <pre><code>{
    aboutImg: "assets/media/The_Lion_Dances_Celebrate_Happy_New_Year_Clipart.jpg"
  }
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>class About extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
          };
      }
  
      render() {
          return(
              &lt;div id="about-container"&gt;
                  &lt;div id="about-img-container"&gt;
                      &lt;img src={ this.props.aboutImg } alt="about_img"/&gt;
                  &lt;/div&gt;
                  &lt;div id="about-text-container"&gt;
                      &lt;p&gt;
                          Message
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Developer Tools:</p>
  
  <pre><code>&lt;div id="about-container" data-reactid=".0.1.1"&gt;
      &lt;div id="about-img-container" data-reactid=".0.1.1.0"&gt;
          &lt;img alt="about_img" data-reactid=".0.1.1.0.0" src="assets/media/The_Lion_Dances_Celebrate_Happy_New_Year_Clipart.jpg"&gt;
      &lt;/div&gt;
      &lt;div id="about-text-container" data-reactid=".0.1.1.1"&gt;
          &lt;p data-reactid=".0.1.1.1.0"&gt;Message&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>