Make iframes consistent and XR and fullscreen capable

playcanvas · Dec 14, 2024 · 081169f · 081169f
1 parent f3e33f1
commit 081169f
Show file tree

Hide file tree

Showing 308 changed files with 328 additions and 334 deletions.
diff --git a/docs/tutorials/360-lookaround-camera.md b/docs/tutorials/360-lookaround-camera.md
@@ -10,7 +10,7 @@ import Link from '@docusaurus/Link';
 Sample showing how to move the camera with mouse and touch to look around
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/TMrb4ucs/" title="360 lookaround camera" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/TMrb4ucs/" title="360 lookaround camera" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/438216/'>Open Project ↗</Link>
diff --git a/docs/tutorials/Using-forces-on-rigid-bodies.md b/docs/tutorials/Using-forces-on-rigid-bodies.md
@@ -5,7 +5,7 @@ thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/4058
 ---
 
 <div className='iframe-container'>
-    <iframe loading="lazy" src="https://playcanv.as/p/8LTSuf4F/" title="Forces and Impulses" />
+    <iframe src="https://playcanv.as/p/8LTSuf4F/" title="Forces and Impulses" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 *Use the cursor keys to apply impulses, the WASD keys to apply torques and rotate the cube. Press and hold F to apply a constant upward force to cancel gravity effects.*

diff --git a/docs/tutorials/additive-loading-scenes.md b/docs/tutorials/additive-loading-scenes.md
@@ -7,7 +7,7 @@ thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/6850
 Full documentation for Loading Scenes is now in the [User Manual][documentation-page].
 
 <div className='iframe-container'>
-    <iframe loading="lazy" src="https://playcanv.as/e/p/cjBInud1/" title="Additive Loading Scenes"></iframe>
+    <iframe src="https://playcanv.as/e/p/cjBInud1/" title="Additive Loading Scenes"></iframe>
 </div>
 
 [documentation-page]: /user-manual/scenes/loading-scenes/
diff --git a/docs/tutorials/advance-loading-screen.md b/docs/tutorials/advance-loading-screen.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 Project sample showing how to use project image assets in the loading screen
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/Di3Fb3fx/" title="Advance loading screen" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/Di3Fb3fx/" title="Advance loading screen" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/458028/'>Open Project ↗</Link>
diff --git a/docs/tutorials/anim-blending.md b/docs/tutorials/anim-blending.md
@@ -5,7 +5,7 @@ thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/4058
 ---
 
 <div className='iframe-container'>
-    <iframe loading="lazy" src="https://playcanv.as/p/HI8kniOx/" title="Anim State Graph Blending"></iframe>
+    <iframe src="https://playcanv.as/p/HI8kniOx/" title="Anim State Graph Blending"></iframe>
 </div>
 
 :::info

diff --git a/docs/tutorials/animate-entities-with-curves.md b/docs/tutorials/animate-entities-with-curves.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 Sample showing use of curves to do basic animation with curves.
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/cp3OGFrJ/" title="Animate entities with curves" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/cp3OGFrJ/" title="Animate entities with curves" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/438191/'>Open Project ↗</Link>
diff --git a/docs/tutorials/animated-textures.md b/docs/tutorials/animated-textures.md
@@ -5,7 +5,7 @@ thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/4058
 ---
 
 <div className='iframe-container'>
-    <iframe loading="lazy" src="https://playcanv.as/p/BM93v05L/" title="Animated Textures"></iframe>
+    <iframe src="https://playcanv.as/p/BM93v05L/" title="Animated Textures"></iframe>
 </div>
 
 *See the [full project][1].*

diff --git a/docs/tutorials/animation-blending.md b/docs/tutorials/animation-blending.md
@@ -11,7 +11,7 @@ This tutorial uses the deprecated Model and Animation components. Please refer t
 :::
 
 <div className='iframe-container'>
-    <iframe loading="lazy" src="https://playcanv.as/p/HI8kniOx/" title="Animation Blending"></iframe>
+    <iframe src="https://playcanv.as/p/HI8kniOx/" title="Animation Blending"></iframe>
 </div>
 
 :::info

diff --git a/docs/tutorials/animation-without-state-graph.md b/docs/tutorials/animation-without-state-graph.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 Example project on how to add and play animations without using a state graph
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/xrWromyG/" title="Animation without State Graph" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/xrWromyG/" title="Animation without State Graph" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/841793/'>Open Project ↗</Link>
diff --git a/docs/tutorials/audio-effects.md b/docs/tutorials/audio-effects.md
@@ -5,7 +5,7 @@ thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/4060
 ---
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/1nS6AnC9/" title="Audio Effects"></iframe>
+    <iframe src="https://playcanv.as/p/1nS6AnC9/" title="Audio Effects"></iframe>
 </div>
 
 *Click on the various buttons to try out different sound effects.*

diff --git a/docs/tutorials/basic-audio.md b/docs/tutorials/basic-audio.md
@@ -5,7 +5,7 @@ thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/4058
 ---
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/XqMw92Zl/" title="Basic Audio"></iframe>
+    <iframe src="https://playcanv.as/p/XqMw92Zl/" title="Basic Audio"></iframe>
 </div>
 
 *The tank is moving around the robot. You can shoot by clicking anywhere on the game.*

diff --git a/docs/tutorials/basic-touch-input.md b/docs/tutorials/basic-touch-input.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 Tutorial demonstrating basic touch input in PlayCanvas. Touch the box and move it around the screen!
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/iEIZxwBC/" title="Basic touch input" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/iEIZxwBC/" title="Basic touch input" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/438010/'>Open Project ↗</Link>
diff --git a/docs/tutorials/billboards.md b/docs/tutorials/billboards.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 Simple example of planes that always face the camera. i.e. billboards. Click on the box and fly around the scene with WASD
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/ZCD1bSXQ/" title="Billboards" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/ZCD1bSXQ/" title="Billboards" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/353938/'>Open Project ↗</Link>
diff --git a/docs/tutorials/camera-following-a-path.md b/docs/tutorials/camera-following-a-path.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 Sample of a camera following points on a spline path.
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/LuNJjRCr/" title="Camera following a path" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/LuNJjRCr/" title="Camera following a path" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/438429/'>Open Project ↗</Link>
diff --git a/docs/tutorials/camera-model-masking.md b/docs/tutorials/camera-model-masking.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 Sample showing to use render masking on the lights and models to enable lighting to only affect certain models and cameras to render certain models.
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/D4ZYtQrG/" title="Camera model masking" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/D4ZYtQrG/" title="Camera model masking" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/436772/'>Open Project ↗</Link>
diff --git a/docs/tutorials/capturing-a-screenshot.md b/docs/tutorials/capturing-a-screenshot.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 A sample showing how capture a screenshot from a camera and download as a PNG
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/Qlf6YvOV/" title="Capturing a screenshot" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0"/>
+    <iframe src="https://playcanv.as/p/Qlf6YvOV/" title="Capturing a screenshot" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0"/>
 </div>
 
 <Link to='https://playcanvas.com/project/438437/'>Open Project ↗</Link>
diff --git a/docs/tutorials/changing-scenes.md b/docs/tutorials/changing-scenes.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 Full documentation for Loading Scenes is now in the [User Manual][documentation-page].
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/e/p/IP7FtbDj/" title="Changing Scenes"></iframe>
+    <iframe src="https://playcanv.as/e/p/IP7FtbDj/" title="Changing Scenes"></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/437633/'>Open Project ↗</Link>

diff --git a/docs/tutorials/changing-textures-at-runtime.md b/docs/tutorials/changing-textures-at-runtime.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 A sample showing how to change a materials texture through a script
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/Ivdxse42/" title="Changing textures at runtime" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/Ivdxse42/" title="Changing textures at runtime" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/437446/'>Open Project ↗</Link>
diff --git a/docs/tutorials/collision-and-triggers.md b/docs/tutorials/collision-and-triggers.md
@@ -5,7 +5,7 @@ thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/4058
 ---
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/1Hj5fX2I/" title="Collision and Triggers"></iframe>
+    <iframe src="https://playcanv.as/p/1Hj5fX2I/" title="Collision and Triggers"></iframe>
 </div>
 
 *Rigidbodies collide with each other, a sound is played on a collision and a trigger volume resets the shapes.*

diff --git a/docs/tutorials/compound-physics-shapes.md b/docs/tutorials/compound-physics-shapes.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 Full documentation for Compound Physics Shapes is now in the [User Manual][documentation-page].
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/KXZ5Lsda/" title="Compound Physics Shapes"></iframe>
+    <iframe src="https://playcanv.as/p/KXZ5Lsda/" title="Compound Physics Shapes"></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/688146/'>Open Project ↗</Link>

diff --git a/docs/tutorials/controlling-lights.md b/docs/tutorials/controlling-lights.md
@@ -5,7 +5,7 @@ thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/4058
 ---
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/tiKpka9M/" title="Controlling Lights"></iframe>
+    <iframe src="https://playcanv.as/p/tiKpka9M/" title="Controlling Lights"></iframe>
 </div>
 
 *Press 1, 2 or 3 to enable/disable the spot, point and directional lights respectively.*

diff --git a/docs/tutorials/crash-course.md b/docs/tutorials/crash-course.md
@@ -23,7 +23,7 @@ This was recorded for [JS GameDev Summit][js-gamedev-summit] and the video is ho
 Play below! Try to get as many food items as you can before the timer runs out! Use WASD for movement.
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/dCoHvsRY/" title="Food Run - Full Project"></iframe>
+    <iframe src="https://playcanv.as/p/dCoHvsRY/" title="Food Run - Full Project"></iframe>
 </div>
 
 ## Timestamps

diff --git a/docs/tutorials/create-qr-code-at-runtime.md b/docs/tutorials/create-qr-code-at-runtime.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 Create QR codes at runtime with https://github.com/davidshimjs/qrcodejs
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/O5MDA13T/" title="Create QR Code at runtime" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/O5MDA13T/" title="Create QR Code at runtime" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/1025199/'>Open Project ↗</Link>
diff --git a/docs/tutorials/creating-rigid-bodies-in-code.md b/docs/tutorials/creating-rigid-bodies-in-code.md
@@ -7,7 +7,7 @@ thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/4423
 import Link from '@docusaurus/Link';
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/w8Hhxovk/" title="Creating Rigid Bodies in Code" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/w8Hhxovk/" title="Creating Rigid Bodies in Code" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/442322/'>Open Project ↗</Link>
diff --git a/docs/tutorials/custom-posteffect.md b/docs/tutorials/custom-posteffect.md
@@ -7,7 +7,7 @@ thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/4060
 In this tutorial, you'll learn how to create a custom watercolor post effect in PlayCanvas that applies a softening filter and a paper grain texture to your scene. By the end of this guide, you'll have a visually appealing watercolor effect that you can apply to any 3D scene.
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/3je0YP0q/" title="Custom Post Effects"></iframe>
+    <iframe src="https://playcanv.as/p/3je0YP0q/" title="Custom Post Effects"></iframe>
 </div>
 
 ## Step 1: Setting Up Your Shaders

diff --git a/docs/tutorials/custom-shaders.md b/docs/tutorials/custom-shaders.md
@@ -5,7 +5,7 @@ thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/4060
 ---
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/zwvhLoS9/" title="Custom Shaders"></iframe>
+    <iframe src="https://playcanv.as/p/zwvhLoS9/" title="Custom Shaders"></iframe>
 </div>
 
 :::info

diff --git a/docs/tutorials/detecting-a-double-click.md b/docs/tutorials/detecting-a-double-click.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 Double click on the screen to move the camera
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/BSSXwNAj/" title="Detecting a double click" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/BSSXwNAj/" title="Detecting a double click" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/436526/'>Open Project ↗</Link>
diff --git a/docs/tutorials/detecting-a-double-tap.md b/docs/tutorials/detecting-a-double-tap.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 Sample showing how to detect a double tap on a touch screen.
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/adm70VcR/" title="Detecting a double tap" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/adm70VcR/" title="Detecting a double tap" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/436531/'>Open Project ↗</Link>
diff --git a/docs/tutorials/detecting-a-long-press.md b/docs/tutorials/detecting-a-long-press.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 Sample showing how to detect a long press/touch to perform an action.
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/kuSZj1KM/" title="Detecting a long press" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/kuSZj1KM/" title="Detecting a long press" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/438459/'>Open Project ↗</Link>
diff --git a/docs/tutorials/dynamic-ui-scroll-view.md b/docs/tutorials/dynamic-ui-scroll-view.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 An example of adding and removing elements from the scroll view in the UI
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/XIarUWAW/" title="Dynamic UI Scroll View" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/XIarUWAW/" title="Dynamic UI Scroll View" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/734864/'>Open Project ↗</Link>
diff --git a/docs/tutorials/entity-picking-using-physics.md b/docs/tutorials/entity-picking-using-physics.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 A sample showing how to use the physics raycast to pick entities
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/J02HZ0PC/" title="Entity picking using physics" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/J02HZ0PC/" title="Entity picking using physics" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/410547/'>Open Project ↗</Link>
diff --git a/docs/tutorials/entity-picking-without-physics.md b/docs/tutorials/entity-picking-without-physics.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 Sample showing how to pick at objects without using the physics system (extra 1MB to published project) or the frame buffer.
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/Sd7PcPNL/" title="Entity picking without physics" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/Sd7PcPNL/" title="Entity picking without physics" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/436809/'>Open Project ↗</Link>
diff --git a/docs/tutorials/entity-picking.md b/docs/tutorials/entity-picking.md
@@ -7,15 +7,15 @@ thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/4058
 Collision Picking - click to select a shape
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/b/Ps1tTzWn/" title="Collision Picking"></iframe>
+    <iframe src="https://playcanv.as/b/Ps1tTzWn/" title="Collision Picking"></iframe>
 </div>
 
 ---
 
 Frame Buffer Picking - click to select a grey shape. The red shapes are set to be not pickable.
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/b/ZQVQqgGU/" title="Frame Buffer Picking"></iframe>
+    <iframe src="https://playcanv.as/b/ZQVQqgGU/" title="Frame Buffer Picking"></iframe>
 </div>
 
 ---

diff --git a/docs/tutorials/explosion-particle-effect.md b/docs/tutorials/explosion-particle-effect.md
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 Sample project showing a multi layered particle effect with screen shake.
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/0hjGM2Lh/" title="Explosion Particle Effect" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" allowvr="" scrolling="no" frameborder="0" />
+    <iframe src="https://playcanv.as/p/0hjGM2Lh/" title="Explosion Particle Effect" allow="camera; microphone; xr-spatial-tracking; fullscreen" allowfullscreen></iframe>
 </div>
 
 <Link to='https://playcanvas.com/project/439297/'>Open Project ↗</Link>
diff --git a/docs/tutorials/facebook-api.md b/docs/tutorials/facebook-api.md
@@ -5,7 +5,7 @@ thumb: https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/4058
 ---
 
 <div className="iframe-container">
-    <iframe loading="lazy" src="https://playcanv.as/p/StXUSCXN/" title="Facebook API"></iframe>
+    <iframe src="https://playcanv.as/p/StXUSCXN/" title="Facebook API"></iframe>
 </div>
 
 :::info
-Original file line number
+Diff line change
@@ Expand Up @@
     ---
     <div className='iframe-container'>
-        <iframe loading="lazy" src="https://playcanv.as/p/HI8kniOx/" title="Anim State Graph Blending"></iframe>
+        <iframe src="https://playcanv.as/p/HI8kniOx/" title="Anim State Graph Blending"></iframe>
     </div>
     :::info
@@ Expand Down @@