# Video background performance

**URL:** <https://forum.babylonjs.com/t/video-background-performance/54932>\
**Category:** Questions\
**Created:** [November 22, 2024, 10:23am UTC](https://forum.babylonjs.com/t/video-background-performance/54932 "2024-11-22T10:23:21Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![reimund](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/reimund/32/7309_2.png) [@reimund](https://forum.babylonjs.com/u/reimund)\
**Post date:** [November 22, 2024, 10:23am UTC](https://forum.babylonjs.com/t/video-background-performance/54932/1 "2024-11-22T10:23:21Z")

</div>

What’s the best way (performance-wise) to draw 3d on top of video? The video should fill up the canvas.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 22, 2024, 2:25pm UTC](https://forum.babylonjs.com/t/video-background-performance/54932/2 "2024-11-22T14:25:12Z")

</div>

I believe currently the simplest and the most performant way is to use HTML 5 video element in canvas parent as background.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 22, 2024, 7:59pm UTC](https://forum.babylonjs.com/t/video-background-performance/54932/3 "2024-11-22T19:59:34Z")

</div>

WebGPU has a nice way of dealing with videos but agree in WebGL extra composition might be cheaper than frame copy.

---

<div class="post-metadata">

**Author:** ![reimund](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/reimund/32/7309_2.png) [@reimund](https://forum.babylonjs.com/u/reimund)\
**Post date:** [November 28, 2024, 10:03am UTC](https://forum.babylonjs.com/t/video-background-performance/54932/5 "2024-11-28T10:03:37Z")

</div>

Something like this? [Manipulating video using canvas - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas)

Does it play nice with Babylonjs if some other mechanism is rendering video to the same canvas?

---

<div class="post-metadata">

**Author:** ![reimund](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/reimund/32/7309_2.png) [@reimund](https://forum.babylonjs.com/u/reimund)\
**Post date:** [November 28, 2024, 10:05am UTC](https://forum.babylonjs.com/t/video-background-performance/54932/6 "2024-11-28T10:05:25Z")

</div>

Trying to decipher your comment! Are you also saying that html 5 video element is the best bet for performance?

(reposting because I think my reply missed the @sebevan mention)

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [November 28, 2024, 12:56pm UTC](https://forum.babylonjs.com/t/video-background-performance/54932/7 "2024-11-28T12:56:17Z")

</div>

> [@reimund](#):
>
> Something like this? [Manipulating video using canvas - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas)

I don’t think you need these complications if I understand your question correctly.

1. Make Babylon canvas transparent (clearColor.a = 0)
2. Put the video as background of canvas parent div with the help of CSS.

---

<div class="post-metadata">

**Author:** ![reimund](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/reimund/32/7309_2.png) [@reimund](https://forum.babylonjs.com/u/reimund)\
**Post date:** [November 28, 2024, 1:39pm UTC](https://forum.babylonjs.com/t/video-background-performance/54932/8 "2024-11-28T13:39:29Z")

</div>

Alright! That was my initial interpretation but then I started thinking too much 🙂