Skip to content

Commit a4780d3

Browse files
committed
Fixed videos displaying on mobile in the blog posts
1 parent 7505050 commit a4780d3

4 files changed

Lines changed: 56 additions & 18 deletions

File tree

_includes/video.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
<iframe src="{{ include.url }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
1+
<div class="page-video-panel page-surface-panel">
2+
<iframe src="{{ include.url }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
3+
</div>

_posts/2026-06-22-Defold-1-13-0.md

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,11 @@ One of the most important additions in Defold 1.13.0 is support for morph target
4343
[Morph targets](/manuals/model-animation/#morph-targets) allow a model to be smoothly deformed by blending between different shapes of the same mesh. In practice, this means that a model can keep the same structure while changing expression, proportions, or visual state without switching to a different mesh. This is especially important for facial animation, character expressions, mouth shapes in dialogue animation, transformations, damage reactions, mutation effects, stylized deformations, and any case where skeletal animation alone does not provide enough control over the surface of the model.
4444

4545
<div align="center">
46+
<div class="page-media-frame page-surface-panel">
4647
<video width="640" height="480" controls>
4748
<source src="/images/posts/releases/defold-1-13-0/morph-targets-1.mp4" type="video/mp4">
4849
</video>
50+
</div>
4951
<div>
5052
_Control Morph Targets (Blend Shapes) of your 3D glTF models in Defold 1.13.0_
5153
</div>
@@ -54,9 +56,11 @@ _Control Morph Targets (Blend Shapes) of your 3D glTF models in Defold 1.13.0_
5456
For developers building 3D games in Defold, this means more expressive characters and a more flexible asset pipeline. Models prepared in 3D modeling tools can now bring not only [skeletal animation data](/manuals/model-animation/) into the engine, but also mesh deformation data. Developers can then control morph target weights through [materials](/manuals/material/) and shaders, creating smooth transitions between different model states.
5557

5658
<div align="center">
59+
<div class="page-media-frame page-surface-panel">
5760
<video width="640" height="480" controls>
5861
<source src="/images/posts/releases/defold-1-13-0/morph-targets-2.mp4" type="video/mp4">
5962
</video>
63+
</div>
6064
<div>
6165
_Animation and manual control of weights in Defold with the [Aria Blake model](https://www.cgtrader.com/free-3d-models/character/woman/aria-blake-game-ready)_
6266
</div>
@@ -65,9 +69,11 @@ _Animation and manual control of weights in Defold with the [Aria Blake model](h
6569
Morph targets are also useful beyond facial animation. They can be used for gameplay-driven changes in an object's state: for example, an enemy can swell before attacking, a character can gradually transform into another form, an object can squash after impact, or an environmental element can change shape in response to interaction. These effects do not require separate models or a complex bone setup if they are better represented through simple shape blending.
6670

6771
<div align="center">
72+
<div class="page-media-frame page-surface-panel">
6873
<video width="640" height="480" controls>
6974
<source src="/images/posts/releases/defold-1-13-0/morph-targets-3.mp4" type="video/mp4">
7075
</video>
76+
</div>
7177
<div>
7278
_Morph targets animation in Defold with [Shewolf model by Polygon Artisan](https://sketchfab.com/3d-models/shewolf-3195fa568c974a4f836fdc9c7abbe631)_
7379
</div>
@@ -82,9 +88,11 @@ In the same release, Defold removes support for the old, deprecated Collada form
8288
Defold 1.13.0 significantly expands the scripting API for the [Box2D physics engine](/ref/stable/b2d-lua/), both for V2, the legacy Defold version, and V3. The most important change is broad support for [joints](/manuals/physics-joints/), but the release also includes new Box2D functionality in general.
8389

8490
<div align="center">
91+
<div class="page-media-frame page-surface-panel">
8592
<video width="640" height="480" controls>
8693
<source src="/images/posts/releases/defold-1-13-0/box2d-1.mp4" type="video/mp4">
8794
</video>
95+
</div>
8896
<div>
8997
_You can now tune many parameters and properties from script - check [the example](https://defold.com/examples/physics/box2d_material_tuning/)_
9098
</div>
@@ -93,9 +101,11 @@ _You can now tune many parameters and properties from script - check [the exampl
93101
From Lua, developers can now create and control different types of physical connections. Depending on the backend used, V2 or V3, this includes distance, revolute, prismatic, weld, wheel, mouse, rope, pulley, gear, motor, and filter joints. The API also allows scripts to read connected bodies, local and world anchor points, reaction forces, torque, limits, speeds, angles, lengths, spring parameters, and motor settings.
94102

95103
<div align="center">
104+
<div class="page-media-frame page-surface-panel">
96105
<video width="640" height="480" controls>
97106
<source src="/images/posts/releases/defold-1-13-0/box2d-4.mp4" type="video/mp4">
98107
</video>
108+
</div>
99109
<div>
100110
_Create bridges using revolute joints - check [the example](https://defold.com/examples/physics/box2d_revolute_bridge/)_
101111
</div>
@@ -104,9 +114,11 @@ _Create bridges using revolute joints - check [the example](https://defold.com/e
104114
Bridges, hinges, ropes, mechanisms, vehicles, moving platforms, cursor-based object grabbing, springs, pendulums, levers, physics puzzles, and dynamically generated structures can now be built directly in game scripts. The logic remains in Lua, without the need to create native extensions just to access core Box2D functionality.
105115

106116
<div align="center">
117+
<div class="page-media-frame page-surface-panel">
107118
<video width="640" height="480" controls>
108119
<source src="/images/posts/releases/defold-1-13-0/box2d-2.mp4" type="video/mp4">
109120
</video>
121+
</div>
110122
<div>
111123
_Design complex terrain using chains - check [the example](https://defold.com/examples/physics/box2d_chain_terrain/)_
112124
</div>
@@ -115,9 +127,11 @@ _Design complex terrain using chains - check [the example](https://defold.com/ex
115127
Access to fixtures and shapes has also been expanded. Scripts can read and change density, friction, restitution, sensors, filter data, and AABB. They can check shape types, test points, and manage shapes or fixtures attached to a body. In practice, this gives more control over object behavior at runtime: an object can change its physical properties after collecting a power-up, an enemy can become a sensor in a specific state, and a dynamic level element can modify its collision filter without rebuilding the entire scene.
116128

117129
<div align="center">
130+
<div class="page-media-frame page-surface-panel">
118131
<video width="640" height="480" controls>
119132
<source src="/images/posts/releases/defold-1-13-0/box2d-3.mp4" type="video/mp4">
120133
</video>
134+
</div>
121135
<div>
122136
_Control damping and frequency using mouse joints - check [the example](https://defold.com/examples/physics/box2d_mouse_joint/)_
123137
</div>
@@ -137,8 +151,6 @@ You can now check whether the runtime supports features such as compute shaders,
137151

138152
New `material` and `compute` script modules have been added to the engine. They allow Lua code to read and modify selected data from [material](/manuals/material/) and [compute](/manuals/compute/) resources.
139153

140-
![Material and compute resources](/images/posts/releases/defold-1-13-0/material-compute.webp)
141-
142154
For materials, scripts can work with constants, samplers, textures, and vertex attributes. For compute resources, access is available for constants, samplers, and textures. This gives developers more control over resources used by rendering and visual effects.
143155

144156
This change is important for projects with custom [render scripts](/manuals/render/), debug tools, material editors, procedural effects, and systems that adjust shader parameters at runtime. Materials and compute resources no longer have to be treated only as static configuration prepared before the game starts. They can be inspected and updated by game code or tools.
@@ -187,4 +199,4 @@ These changes may require work in older projects, but they simplify the future d
187199

188200
## Summary
189201

190-
Defold 1.13.0 is available now. It cleans up and develops the engine in several concrete aspects. We believe these changes and the direction Defold is taking are good for the engine in the long term, and we hope you'll make good use of the new feature to create great games!
202+
Defold 1.13.0 is available now. It cleans up and develops the engine in several concrete aspects. We believe these changes and the direction Defold is taking are good for the engine in the long term, and we hope you'll make good use of the new feature to create great games!

_scss/defold.scss

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2182,6 +2182,20 @@ a.page-route-card {
21822182
height: auto;
21832183
}
21842184

2185+
.page-video-panel {
2186+
width: 100%;
2187+
aspect-ratio: 16 / 9;
2188+
overflow: hidden;
2189+
background-color: #000;
2190+
}
2191+
2192+
.page-video-panel iframe {
2193+
display: block;
2194+
width: 100%;
2195+
height: 100%;
2196+
border: 0;
2197+
}
2198+
21852199
.product-hub-gif-shell {
21862200
perspective: 1800px;
21872201
transform-style: preserve-3d;
@@ -3290,6 +3304,30 @@ a.page-text-panel.page-post-panel-link .page-post-preview-title {
32903304
margin-right: auto;
32913305
}
32923306

3307+
.post video {
3308+
max-width: 100%;
3309+
height: auto;
3310+
display: block;
3311+
margin-left: auto;
3312+
margin-right: auto;
3313+
}
3314+
3315+
.post .page-media-frame {
3316+
width: 100%;
3317+
max-width: 640px;
3318+
margin-left: auto;
3319+
margin-right: auto;
3320+
}
3321+
3322+
.content-flow > iframe[src*="youtube.com/embed"],
3323+
.content-flow > iframe[src*="youtube-nocookie.com/embed"] {
3324+
width: 100%;
3325+
max-width: 100%;
3326+
aspect-ratio: 16 / 9;
3327+
height: auto;
3328+
display: block;
3329+
}
3330+
32933331
.center img {
32943332
max-width: 100%;
32953333
display: block;

_scss/youtube.scss

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,6 @@
22
* YouTube Lazy Loading Styles
33
******************************************************************************/
44

5-
.page-video-panel {
6-
width: 100%;
7-
aspect-ratio: 16 / 9;
8-
overflow: hidden;
9-
background-color: #000;
10-
}
11-
12-
.page-video-panel iframe {
13-
display: block;
14-
width: 100%;
15-
height: 100%;
16-
border: 0;
17-
}
18-
195
.page-feature-card-youtube.page-feature-card-with-media {
206
--feature-card-padding-inline: 1.7rem;
217
--feature-card-padding-top: 1.7rem;

0 commit comments

Comments
 (0)