fix: Correcting video ratio

en/manual/game-studio/prefabs/nested-prefabs.md

@@ -11,11 +11,11 @@ If you modify a nested prefab, all the dependent prefabs inherit the change auto
 
 This video demonstrates an example of nested prefabs:
 
-<p>
+<div class="ratio ratio-16x9 mb-3">
 <video autoplay loop class="responsive-video" poster="media/create-nested-prefab.jpg">
    <source src="media/create-nested-prefab.mp4" type="video/mp4">
 </video>
-</p>
+</div>
 
 In the center pane, we already have a prefab named **Lamp**. In the right pane, we create a new prefab named **Boxes**, comprising several box entities positioned together. We add the Boxes prefab to the Lamp prefab. Changes made to the Boxes prefab are reflected in the Lamp prefab. These are in turn reflected in the instances of the Lamp prefab in the scene (left pane).
 

en/manual/game-studio/prefabs/override-prefab-properties.md

@@ -12,11 +12,11 @@ In the following video, the **Lamp** prefab contains several box entities that b
 
 If we add another box to the **Boxes** parent in the prefab, it doesn't appear in the overridden instance. That's because we deleted the **Boxes** parent from that instance.
 
-<p>
+<div class="ratio ratio-16x9 mb-3">
 <video autoplay loop class="responsive-video" poster="media/delete-boxes-from-prefab-instance.jpg">
    <source src="media/delete-boxes-from-prefab-instance.mp4" type="video/mp4">
 </video>
-</p>
+</div>
 
 ## View overridden properties
 

en/manual/particles/ribbons-and-trails.md

@@ -32,11 +32,11 @@ To create ribbons and trails, you usually need to sort the particles into an ord
 
 Here's an example of how unsorted particles look at runtime:
 
-<p>
+<div class="ratio ratio-16x9 mb-3">
 <video autoplay loop class="responsive-video" poster="tutorials/media/sword-slash-2.jpg">
    <source src="tutorials/media/sword-slash-2.mp4" type="video/mp4">
 </video>
-</p>
+</div>
 
 Rather than the particles connecting in order, the strip erratically jumps between particles. (This is the same problem alpha-blended quads have when they're not properly sorted.)
 

en/manual/physics/create-a-bouncing-ball.md

@@ -73,11 +73,11 @@ Now we'll move the camera to give us a good view of the scene.
 
 Let's see what the scene looks like so far. To run the project, press **F5**.
 
-<p>
+<div class="ratio ratio-16x9 mb-3">
 <video autoplay loop class="responsive-video">
    <source src="media/physics-tutorials-create-a-bouncing-ball-falling-ball.mp4" type="video/mp4">
 </video>
-</p>
+</div>
 
 The Sphere (body) responds to gravity and falls. The Ground (static collider) breaks its fall. But there's no bounce effect yet.
 
@@ -96,11 +96,11 @@ Let's set the `Spring Frequency` and `Spring Damping Ratio` of the Sphere.
 
 To see how this changes the physics, run the project again (**F5**). This time, the ball bounces on the ground before coming to a stop:
 
-<p>
+<div class="ratio ratio-16x9 mb-3">
 <video autoplay loop class="responsive-video">
    <source src="media/physics-tutorials-create-a-bouncing-ball-falling-and-bouncing-ball.mp4" type="video/mp4">
 </video>
-</p>
+</div>
 
 Now that we've created a bouncing ball, we can use it to learn to [Script a trigger](script-a-trigger.md).
 

en/manual/physics/script-a-trigger.md

@@ -98,11 +98,11 @@ Now the trigger entity is between the ground and the sphere.
 
 If we run the project now (**F5**), the ball bounces off the trigger, but nothing happens.
 
-<p>
+<div class="ratio ratio-16x9 mb-3">
 <video autoplay loop class="responsive-video">
    <source src="media/bouncing-ball-with-trigger-no-effect.mp4" type="video/mp4">
 </video>
-</p>
+</div>
 
 Let's write a script to change the size of the ball when it enters the trigger.
 
@@ -194,11 +194,11 @@ Run the project (**F5**) to see the trigger in action.
 
 The ball falls through the trigger, doubles in size, exits the trigger, and returns to its normal size.
 
-<p>
+<div class="ratio ratio-16x9 mb-3">
 <video autoplay loop class="responsive-video">
    <source src="media/bouncing-ball-with-trigger-scaled.mp4" type="video/mp4">
 </video>
-</p>
+</div>
 
 ## See also
 

en/manual/sprites/use-sprites.md

@@ -20,11 +20,11 @@ To add a sprite to a scene, add a **sprite component** to an entity. Afterwards,
 
 3. From the **Asset View**, drag the sprite sheet to the **Source** field in the Sprite component:
 
-    <p>
+    <div class="ratio ratio-16x9 mb-3">
         <video autoplay loop class="responsive-video" poster="media\drag-sprite-sheet-to-asset-picker.png">
         <source src="media\drag-sprite-sheet-to-asset-picker.mp4" type="video/mp4">
         </video>
-    </p>
+    </div>
 
     Alternatively, click ![Hand icon](~/manual/game-studio/media/hand-icon.png) (**Select an asset**):