title: Youtube Player Api Get Screenshot
body: <p>There is an <code>iframe</code> on <a href="https://developers.google.com/youtube/iframe_api_reference" rel="noreferrer">this page</a> I want to get a screenshot from the <code>video</code> tag, so I have to reach video tag that in the <code>iframe</code> tag.</p>
  
  <p>When I open the console and run this code:</p>
  
  <pre><code> const videoElement = document.getElementsByTagName('iframe')[0]
                   .contentWindow.document.getElementsByTagName('video')[0];
  
  //Extracting picture from video tag
      const canvas = document.createElement('canvas');
          canvas.width = videoElement.videoWidth;
          canvas.height = videoElement.videoHeight;
          canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);
  </code></pre>
  
  <p>This error has been thrown:</p>
  
  <pre><code>Uncaught DOMException: Blocked a frame with origin "https://developers.google.com" from accessing a cross-origin frame.
      at &lt;anonymous&gt;:1:57
  </code></pre>
  
  <p>Also, I checked <a href="https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame">this</a> question</p>
  
  <p><strong>My question is how can I get a screenshot from YouTube Player API?</strong> </p>