fix: Add playsinline attribute to video elements (#1082)

Author: mhawryluk

README.md

@@ -10,7 +10,7 @@
 **TypeGPU** is a TypeScript library that enhances the WebGPU API, allowing resource management in a type-safe, declarative way.
 
 <div align="center">
-<video width="512" autoplay muted loop src="https://github.com/user-attachments/assets/5bca716d-477d-44a1-a839-5df0c8d9044c"></video>
+<video width="512" autoplay muted loop playsinline src="https://github.com/user-attachments/assets/5bca716d-477d-44a1-a839-5df0c8d9044c"></video>
 </div>
 
 ## Documentation

apps/typegpu-docs/src/content/examples/image-processing/camera-thresholding/index.html

@@ -1,2 +1,2 @@
-<video width="400" height="300" autoplay style="object-fit: fill"></video>
+<video width="400" height="300" autoplay playsinline style="object-fit: fill"></video>
 <canvas width="400" height="300"></canvas>

apps/typegpu-docs/src/content/examples/image-processing/chroma-keying-next/index.html

@@ -3,6 +3,6 @@
     <div class="rgb" style="padding: 1rem; background: white;">R: 0 G: 255 B: 0</div>
 </div>
 <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;">
-    <video width="400" height="300" autoplay style="object-fit: fill"></video>
+    <video width="400" height="300" autoplay playsinline style="object-fit: fill"></video>
     <canvas width="400" height="300"></canvas>
 </div>

apps/typegpu-docs/src/content/examples/image-processing/chroma-keying/index.html

@@ -3,6 +3,6 @@
     <div class="rgb" style="padding: 1rem; background: white;">R: 0 G: 255 B: 0</div>
 </div>
 <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;">
-    <video width="400" height="300" autoplay style="object-fit: fill"></video>
+    <video width="400" height="300" autoplay playsinline style="object-fit: fill"></video>
     <canvas width="400" height="300"></canvas>
 </div>

apps/typegpu-docs/src/pages/index.astro

@@ -1,24 +1,24 @@
 ---
 import { Image } from 'astro:assets';
-import FeatureCard from '../components/FeatureCard.astro';
-import GetStartedButton from '../components/GetStartedButton.astro';
-import FooterLink from '../components/FooterLink.astro';
-import PageLayout from '../layouts/PageLayout.astro';
 import DiscordIconSvg from '../assets/discord-icon.svg';
+import GiantTypeGPULogo from '../assets/giant-typegpu.svg';
 import GithubIconSvg from '../assets/github-icon.svg';
-import SwmLogomarkSvg from '../assets/swm-logomark.svg';
+import Illustration from '../assets/illustration.svg';
 import SwmLogoSvg from '../assets/swm-logo.svg';
+import SwmLogomarkSvg from '../assets/swm-logomark.svg';
 import TypeGPULogoLight from '../assets/typegpu-logo-light.svg';
 import TypeGPULogomarkMonolight from '../assets/typegpu-logomark-monolight.svg';
-import GiantTypeGPULogo from '../assets/giant-typegpu.svg';
-import Illustration from '../assets/illustration.svg';
-import RoadMapStep from '../components/roadmap/RoadMapStep.astro';
-import MilestoneBuffersBadge from '../components/roadmap/MilestoneBuffersBadge.astro';
+import FeatureCard from '../components/FeatureCard.astro';
+import FooterLink from '../components/FooterLink.astro';
+import GetStartedButton from '../components/GetStartedButton.astro';
 import MilestoneBindGroupsBadge from '../components/roadmap/MilestoneBindGroupsBadge.astro';
-import MilestoneFunctionsBadge from '../components/roadmap/MilestoneFunctionsBadge.astro';
-import MilestonePipelinesBadge from '../components/roadmap/MilestonePipelinesBadge.astro';
+import MilestoneBuffersBadge from '../components/roadmap/MilestoneBuffersBadge.astro';
 import MilestoneCodeBadge from '../components/roadmap/MilestoneCodeBadge.astro';
+import MilestoneFunctionsBadge from '../components/roadmap/MilestoneFunctionsBadge.astro';
 import MilestoneLinkerBadge from '../components/roadmap/MilestoneLinkerBadge.astro';
+import MilestonePipelinesBadge from '../components/roadmap/MilestonePipelinesBadge.astro';
+import RoadMapStep from '../components/roadmap/RoadMapStep.astro';
+import PageLayout from '../layouts/PageLayout.astro';
 
 const showcaseVideoResolution = [2048, 1200];
 ---
@@ -98,10 +98,11 @@ const showcaseVideoResolution = [2048, 1200];
             aspectRatio:
               showcaseVideoResolution[0] / showcaseVideoResolution[1],
           }}
-          autoplay="true"
-          loop="true"
-          muted="true"
-          controls="true"
+          autoplay
+          loop
+          muted
+          controls
+          playsinline
           class="w-full lg:rounded-[2.5rem] md:rounded-[1.875rem] rounded-2xl shadow-tameplum-800/50 shadow-lg"
         ></video>
       </div>

packages/typegpu/README.md

@@ -10,7 +10,7 @@
 **TypeGPU** is a TypeScript library that enhances the WebGPU API, allowing resource management in a type-safe, declarative way.
 
 <div align="center">
-<video autoplay muted loop src="https://github.com/user-attachments/assets/5bca716d-477d-44a1-a839-5df0c8d9044c"></video>
+<video autoplay muted loop playsinline src="https://github.com/user-attachments/assets/5bca716d-477d-44a1-a839-5df0c8d9044c"></video>
 </div>
 
 ## Documentation