I’ve tried the next code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta title="viewport" content material="width=device-width, initial-scale=1.0, minimal-ui">
<title>Sport Embed</title>
<type>
/* Added type */
html, physique, iframe, canvas, div {
margin: 0px;
padding: 0px;
}
html, physique {
top: 100%;
width: 100%;
overflow: hidden;
}
physique {
overflow: auto;
-webkit-overflow-scrolling: contact;
margin: 0;
padding: 0;
show: flex;
flex-direction: column;
background-color: #002B50;
}
#gameframe {
show: none;
width: 100%;
top: -webkit-fill-available;
border: none;
}
#startButton {
margin: auto;
padding: 20px;
background-color: #000;
shade: #fff;
border: none;
cursor: pointer;
}
</type>
</head>
<physique>
<button id="startButton">Play Sport</button>
<iframe id="gameframe" allowfullscreen="true" permit="autoplay; fullscreen; digital camera; focus-without-user-activation *; monetization; gamepad; keyboard-map *; xr-spatial-tracking; clipboard-write; web-share" title="gameFrame" scrolling="no" sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts allow-same-origin allow-downloads" src="" title="Sport"></iframe>
<script>
doc.getElementById('startButton').addEventListener('click on', perform() {
this.type.show = 'none';
const gameframe = doc.getElementById('gameframe');
gameframe.type.show = 'block';
gameframe.src = "https://7252203e-60a1-4698-bba2-5a5327175ce7.poki-gdn.com/ce839146-34c2-401e-8ebf-ac88d456b234/poki-savegame-safarisavegame.html?subsequent=httpspercent3Apercent2Fpercent2F7252203e-60a1-4698-bba2-5a5327175ce7.poki-gdn.compercent2Fce839146-34c2-401e-8ebf-ac88d456b234percent2Findex.htmlpercent3Fcountrypercent3DTHpercent26ccpaAppliespercent3D0percent26url_referrerpercent3Dhttpspercent253Apercent252Fpercent252Fpoki.compercent252Fpercent26tagpercent3Dpg-v3.118.0percent26site_idpercent3D3percent26iso_langpercent3Denpercent26poki_urlpercent3Dhttpspercent253Apercent252Fpercent252Fpoki.compercent252Fenpercent252Fgpercent252Fstick-defenderspercent26gdhoistpercent3Dyespercent26nonPersonalizedpercent3Dnpercent26familyFriendlypercent3Dnpercent26categoriespercent3D37percent252C69percent252C77percent252C927percent252C929percent252C1140percent252C1155percent26special_conditionpercent3Dlandingpercent26game_idpercent3D7252203e-60a1-4698-bba2-5a5327175ce7percent26game_version_idpercent3Dce839146-34c2-401e-8ebf-ac88d456b234";
// iOS Repair: Resizing for fullscreen and contemplating nav bar
const resize = () => {
window.scrollTo(0, 0);
doc.physique.type.width = doc.documentElement.type.width = window.innerWidth + 'px';
doc.physique.type.top = doc.documentElement.type.top = window.innerHeight + 'px';
};
window.addEventListener('resize', resize);
resize();
setTimeout(resize, 3000); // Extra try to resize after a delay for iOS
});
</script>
</physique>
</html>
On my absolutely up to date iphone 12 mini utilizing Safari I cant get the sport to go fullscreen.
I anticipated the sport to go fullscreen like on https://poki.com/en/g/stick-defenders. Ideally I need a most simple instance of easy methods to get an exterior iframe to go fullscreen on IOS/Safari.
