Clamp video texture

I want to preserve the video aspect ratio and video mesh size. So i want video texture to stop repeating and see black stripes at the bottom and top. How can i do it?

You can set the clamp mode after the video has loaded:

clamping video | Babylon.js Playground (

1 Like

Thank you. How about black stripes?

I hope people will correct me if I am wrong, but I can’t think of a possibility to have black stripes with texture properties alone.
Since you have the properties (you are setting the vscale and voffset, for example, and the size of the plane) you can also calculate the size of the required black stripes, or resize the plane on which the texture is displayed to avoid the need of black stripes altogether

1 Like

Indeed, clamp to border and border color are not supported in WebGL, see for eg:

Thank you. So do i need a custom shader for this? And i dont know how to write a custom shader, can you show me a way to learn it ?

I think the suggestion from @RaananW would be the best thing to do:

That is not a good solution in my case

babylonjs has a great visual node material system.

I tried to make an example, he can set the actual video width and height to display, while the rest is black.

1 Like

This is the address of the material just used.
Babylon.js Node Material Editor (

Here is the documentation for this material system.
Node Material | Babylon.js Documentation (

It’s very similar to unreal engine’s blueprint or blender’s node material system, if you have similar experience, I believe you can get started quickly.


Here are some examples of Node materials.
Centring a video texture -
Video texture fills available space -


Second pg is the one i am looking for. Thank you! Thanks for all the answers.