title: Close button in Full Screen html5
body: <p>I have an online gaming site, and when the person clicks the "go fullscren" button, the game is in full screen.</p>
  
  <p>My code is:</p>
  
  <pre><code> Game:
   &lt;iframe  id="videoElement"  seamless="seamless" id="iframegame" scrolling="no" frameborder="0" height="433" width="770.4132075471698" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" webkit-playsinline="true" src="//html5.GameDistribution.com/ed10c5476d9c405191a6269d648f895e/?gp=1?gp=1&amp;amp;siteid=158&amp;amp;channelid=1&amp;amp;siteLocale=tr-TR&amp;amp;spilStorageId=94208775588" style="width: 741px; height: 416.692px;"&gt;&lt;/iframe&gt;
  
   Button Full Screen:   
  &lt;button id="goFS"&gt;Go Fullscreen&lt;/button&gt;
      &lt;script&gt;
        var goFS = document.getElementById("goFS");
        goFS.addEventListener("click", function() {
            var videoElement = document.getElementById("videoElement");
            videoElement.requestFullscreen();
        }, false);
      &lt;/script&gt;
  </code></pre>
  
  <p>Something like that:</p>
  
  <p>When the person clicks, the game is in full screen:<a href="https://i.stack.imgur.com/QecNZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QecNZ.png" alt="enter image description here"></a></p>
  
  <p>However, how do I add a "close button" so that the game returns to its normal size when in full screen?</p>
  
  <p>something like this (notice the red button in the upper right corner of the screen):<a href="https://i.stack.imgur.com/rTwSl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rTwSl.png" alt="enter image description here"></a></p>