JSFiddle - React, Tailwind, and code Playground

by tsdexter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<iframe id="fullscreen" src="http://jsfiddle.net" allowfullscreen></iframe>

<div id="confirm" style="display:none;position:fixed;width:100%;height:100%;text-align:center;padding-top:30px;background:rgba(0,0,0,.75);top:0;left:0;">
  <button id="allow">Allow fullscreen</button>
  <button id="cancel">Cancel fullscreen</button>
</div>

JavaScript

jQuery(document).ready(function()
{
	if( jQuery( window ).width() <= 600 )
  {
  	jQuery('#confirm').show();
  	jQuery('#allow').on('click', function(e){
      document.getElementById('fullscreen').webkitRequestFullScreen();
      jQuery('#confirm').hide();
      e.stopPropagation();
    });
    jQuery('#confirm,#cancel').on('click', function(){
      jQuery('#confirm').hide();
    });
  }
});