title: Iframe is redirecting instead of displaying
body: <p>I am using an iframe which changes its content url source depending on a button press.
  When I press a button which displays a powerpoint embedded from OneDrive it works perfectly.
  However, when I press a button which display an mp4 embedded from OneDrive it tries to redirect the entire page to the url (away from the webpage, instead of within the iframe).</p>
  <p>Nothing in the code changes other than the content's url and I cannot figure out the solution.</p>
  <p>Here are the sources for the Powerpoint (ID 1) and the MP4 (ID 2)</p>
  <p><a href="https://i.stack.imgur.com/BgF02.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BgF02.png" alt="ID 1 = Powerpoint, ID 2 = Mp4" /></a></p>
  <p>Here's the styled component css for the iframe:</p>
  <pre><code>export const ContentFrame = styled.iframe`
  border: none;
  height: 98%;
  width: 97%;
  frameborder: 0;
  sandbox=&quot;allow-forms allow-scripts&quot;;
  scrolling=&quot;no;
  </code></pre>
  <p>`</p>
  <p>Here's the ReactJS code including the definition of the iframe and how it gets the selected contents url:</p>
  <pre><code>export const Training = (props) =&gt; {
  const[freeCourses, setFreeCourses] = useState([])
  const[SelectedContent, setSelectedContent] = useState(&quot;https://onedrive.live.com/embed?cid=BF3138943720AE9B&amp;resid=BF3138943720AE9B%2114069&amp;authkey=AKEyx39blf01VCI&amp;em=2&quot;)
  
  useEffect(() =&gt; {
      fetch(&quot;/api/free&quot;)
          .then((res) =&gt; {
              return res.json()
          }).then((json) =&gt; {
              setFreeCourses(json)
          })
  },[])
  
  
  function ContentSelection(url){
      setSelectedContent(url)
  }
  
  return (
      &lt;TrainingContainer&gt;
          &lt;ContentWrapper&gt;
              &lt;ContentHeader&gt;{}&lt;/ContentHeader&gt;
              &lt;ContentFrame src={SelectedContent}&gt;Your Browser Does not support this content&lt;/ContentFrame&gt;
          &lt;/ContentWrapper&gt;
          &lt;SelectorWrapper&gt;
              &lt;FreeContentContainer&gt;
                  &lt;FreeContentHeader&gt;Your Free Content&lt;/FreeContentHeader&gt;
                  &lt;FreeContentWrapper&gt;                        
                      {freeCourses.map(course =&gt; {
                          return (&lt;Content href={course.url} key={course.id} onClick={() =&gt; ContentSelection(course.url)}&gt;&lt;ContentImg src={course.imgURL} alt=&quot;Not working&quot;/&gt;&lt;/Content&gt;)
                      })}
                  &lt;/FreeContentWrapper&gt;
              &lt;/FreeContentContainer&gt;
              &lt;PaidContentContainer&gt;
                  &lt;PaidContentHeader&gt;Your Paid Content&lt;/PaidContentHeader&gt;
                  &lt;PaidContentWrapper&gt;
                      {props.courses.map(course =&gt; {
                          return (&lt;Content href={course.url} key={course.id} onClick={() =&gt; ContentSelection(course.url)}&gt;&lt;ContentImg src={course.imgURL}/&gt;&lt;/Content&gt;)
                      })}
                  &lt;/PaidContentWrapper&gt;
              &lt;/PaidContentContainer&gt;
          &lt;/SelectorWrapper&gt;
      &lt;/TrainingContainer&gt;
  )
  </code></pre>
  <p>}</p>