title: Iframe video not occupying full width
body: <p>I am new to React JS and also new to any component based framework. For learning purpose I am creating video tutorial like website.</p>
  <p>I am using <code>iframe</code> element to render the video and giving it 100% width to occupy full width. The problem us <code>iframe</code> element generating its own <code>html</code> with <code>video</code> element as child of <code>body</code>.</p>
  <p><a href="https://i.stack.imgur.com/NDSzV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NDSzV.png" alt="enter image description here" /></a></p>
  <p>Now to make video occupy full width I have to apply <code>width: 100%</code> on <code>video</code> element which I have tested from browser developer tool. In my JSX there is only <code>iframe</code> and no <code>video</code> element so I am applying style like this</p>
  <pre><code>iframe: {
      width: '100%',
      height: '80vh',
      &quot;&amp; video&quot;: {
      width: &quot;100% !important&quot;
      }
  },
  
  return (
          &lt;div&gt;
              {
                   &lt;Iframe url={this.props.current_chapter.chapter_video}
                           className={classes.iframe}/&gt;
              }
          &lt;/div&gt;
  );
  </code></pre>
  <p>So I have two questions</p>
  <ol>
  <li><p>why <code>iframe</code> rendering its own html ?</p>
  </li>
  <li><p>How can I make <code>video</code> occupy full width?</p>
  </li>
  </ol>