title: "Video unavailable" issue when using iFrame to show YouTube videos
body: <p>When I use an iframe to show YouTube videos in my Angular 7 project, some of the videos show a "Video unavailable" error.
  <a href="https://i.stack.imgur.com/DCxQW.png" rel="nofollow noreferrer">Screenshot of error message</a></p>
  
  <p>Sample code of iframe with error:</p>
  
  <pre><code>&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/dhYOPzcsbGM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>This is an unedited code from YouTube -> Share -> Embed (So nothing wrong with the code)</p>
  
  <p>This will work perfectly well when running in localhost, but isn't working in my dev or production environment. Also note, it won't work in <a href="http://127.0.0.1:4200/" rel="nofollow noreferrer">http://127.0.0.1:4200/</a></p>
  
  <p>Things I've tried &amp; found,</p>
  
  <ul>
  <li>Works in Edge browser (Even in production,  surprisingly).</li>
  <li>Not working in Chrome &amp; Firefox.</li>
  <li>If you replace the src of iframe example in w3schools, it will work. <a href="https://www.w3schools.com/tags/tag_iframe.asp" rel="nofollow noreferrer">https://www.w3schools.com/tags/tag_iframe.asp</a> (So it can work in a non local env).</li>
  <li>Issue isn't caused by the owner of the video restricting embedding. Because in that case, below the "Video unavailable", it will clearly mention the cause.</li>
  <li>I've tried running it in a brand new project. So, issue is not caused by any packages or faults in my original project.</li>
  <li>I get this warning,</li>
  </ul>
  
  <blockquote>
    <p>A cookie associated with a cross-site resource at
    <a href="http://www.youtube.com/" rel="nofollow noreferrer">http://www.youtube.com/</a> was set without the <code>SameSite</code> attribute. A
    future release of Chrome will only deliver cookies with cross-site
    requests if they are set with <code>SameSite=None</code> and <code>Secure</code>. You can
    review cookies in developer tools under Application>Storage>Cookies
    and see more details at
    <a href="https://www.chromestatus.com/feature/5088147346030592" rel="nofollow noreferrer">https://www.chromestatus.com/feature/5088147346030592</a> and
    <a href="https://www.chromestatus.com/feature/5633521622188032" rel="nofollow noreferrer">https://www.chromestatus.com/feature/5633521622188032</a>.</p>
  </blockquote>
  
  <p>P.S. I'm a mid level noob at Angular, please be elaborate with your answers. Thank you for the help.</p>