title: Trigger Full screen from button outside of the iframe?
body: <p>I am using Cloud Games for adding an iframe and they have a full screen option within the iframe canvas to toggle it to full screen.
  Is there a way I can make it full screen when we press the button that says 'Full Screen'</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;
    &lt;button id="trigger"&gt;Full Screen&lt;/button&gt;
  &lt;/div&gt;
  &lt;section&gt;
    &lt;iframe src="https://cloudgames.com/games/html5/soldiers-combat-new-en-s-iga-cloud/index.html?pub=10" name="cloudgames-com" width="913" height="516" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"&gt;&lt;/iframe&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>JS </p>
  
  <pre><code>$('#trigger').click(function(e) {
    e.preventDefault();
    console.log('Button Pressed');
  });
  </code></pre>
  
  <p>Link to <a href="https://codepen.io/sabipu/pen/rrbyRE" rel="nofollow noreferrer">Codepen</a></p>
  
  <p><a href="https://i.stack.imgur.com/4rhL4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4rhL4.png" alt="Full Screen Button"></a></p>