Trigger Full screen from button outside of the iframe?

Question

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'

HTML

<div>
  <button id="trigger">Full Screen</button>
</div>
<section>
  <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"></iframe>
</section>

JS

$('#trigger').click(function(e) {
  e.preventDefault();
  console.log('Button Pressed');
});

Link to Codepen

Answer 1

I found this one: https://codepen.io/ssk7833/pen/mVOXXp

I think this part is relevant for you:

var iframe = document.querySelector('#container iframe');
    // Do fullscreen
    if (iframe.requestFullscreen) {
      iframe.requestFullscreen();
    } else if (iframe.webkitRequestFullscreen) {
      iframe.webkitRequestFullscreen();
    } else if (iframe.mozRequestFullScreen) {
      iframe.mozRequestFullScreen();
    } else if (iframe.msRequestFullscreen) {
      iframe.msRequestFullscreen();
    }