# Issue making iframe inside CSS3DObject fit arbritary plane

**URL:** <https://forum.babylonjs.com/t/issue-making-iframe-inside-css3dobject-fit-arbritary-plane/36489>\
**Category:** Questions\
**Created:** [December 12, 2022, 5:28pm UTC](https://forum.babylonjs.com/t/issue-making-iframe-inside-css3dobject-fit-arbritary-plane/36489 "2022-12-12T17:28:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nicoraf](https://avatars.discourse-cdn.com/v4/letter/n/ad7895/32.png) [@nicoraf](https://forum.babylonjs.com/u/nicoraf)\
**Post date:** [December 12, 2022, 5:28pm UTC](https://forum.babylonjs.com/t/issue-making-iframe-inside-css3dobject-fit-arbritary-plane/36489/1 "2022-12-12T17:28:15Z")

</div>

Hello,

I am trying to figure out a way to programmatically fit an iframe inside an arbritary Plane in a Scene.

I want to have a way that given an

- arbitrary Plane in a Scene.
- an iframe of a webpage

I would like to render the webpage fiting the whole Plane space.

- The plane has a transparent material that enables to see the content of the iframe.
- The cssobject-div is transformed with the help of CSS3DObject and CSS3DRenderer

Suppose I have a Plane placed in the scene, for this example its name is “web\_plane”. I would like to programmatically make it render an iframe, for this example the webpage “[https://www.babylonjs.com](https://www.babylonjs.com)” . I am struggling to make it fit completely to cover the plane “web\_plane”.

To my understanding in order to achieve that I need that the transformed div occupy exactly the place of the plane but I believe it is not the case as it is smaller.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/2/d2ed571ca2913990b3ac53d57e2fd478e4afcbf3.jpeg)

Any help would be appreciated 🙂

> **[Babylon.js Playground](https://playground.babylonjs.com/#PQ0PUD)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<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:** [December 12, 2022, 10:54pm UTC](https://forum.babylonjs.com/t/issue-making-iframe-inside-css3dobject-fit-arbritary-plane/36489/2 "2022-12-12T22:54:04Z")

</div>

This thread should have lots of tips [Youtube videos on a mesh (port of CSS3DRenderer.js)](https://forum.babylonjs.com/t/youtube-videos-on-a-mesh-port-of-css3drenderer-js/10600) and @ozRocker is the king of it !!!

---

<div class="post-metadata">

**Author:** ![nicoraf](https://avatars.discourse-cdn.com/v4/letter/n/ad7895/32.png) [@nicoraf](https://forum.babylonjs.com/u/nicoraf)\
**Post date:** [December 13, 2022, 8:26pm UTC](https://forum.babylonjs.com/t/issue-making-iframe-inside-css3dobject-fit-arbritary-plane/36489/3 "2022-12-13T20:26:13Z")

</div>

Hi @sebavan thanks for your answer. I have been around with the tips, but I am still wondering how I can solve it for this concrete example to stretch the iframe to the whole plane and I don’t know how to do it.

---

<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:** [December 14, 2022, 4:35pm UTC](https://forum.babylonjs.com/t/issue-making-iframe-inside-css3dobject-fit-arbritary-plane/36489/4 "2022-12-14T16:35:49Z")

</div>

You need to set correct sizes in a few places in the playground: [https://playground.babylonjs.com/#PQ0PUD#1](https://playground.babylonjs.com/#PQ0PUD#1)

in the plane size and scaling, then in the youtubeVideoWidth and height as well as the createCSSobject width and height