[SOLVED] Sides getting cutoff when embedding PlayCanvas iframe in webpage

So when I open my playcanvas debug and hosted link it opens perfectly well but when I embed the same in an iframe in a web page the sides seem to get cutoff
below are images for reference

Image 1 - webpage screenshot

Image 2 - hosted link

Hi @Harsh_Zota,

Make sure your iframe style (CSS) is correctly set to automatically fit the width and height of the parent container element.

You can inspect how that can work by publishing a PlayCanvas hosted build. If you open and inspect the iframe (it’s iframed as well) you can see the styles.

I checked my build , but in the build my height is coming as 995px instead of 1080px and once I checked the problem I am facing is because of that only.
Is there any way I can change the CSS of the canvas it is opening in

If your project is set to fill the window, PlayCanvas will resize the canvas to cover whatever size the DOM element is:

image

If you have set to none, then you can resize it using the following method:

https://developer.playcanvas.com/api/pc.Application.html#setCanvasResolution

I checked my canvas , for some odd reason it is taking inline css of 995px instead of Height and width 100%

That’s then something you should be fixing in your parent website code. The iframe style is being set by the parent website hosting it.

Not the parent website , I am getting this CSS on my debug link, so I think it has something to do with playcanvas itself

Ah right, I thought reading your initial message that it plays well on your launch debug link, and breaks on your hosted link.

Not sure what the issue is. Are you able to share a sample project that reproduces this issue (you can remove any branded/private assets)?

NoteNumber here is my hosted link check it out

Seems to work as expected, the iframe is resized to fill the parent container.

Unless that’s not the behavior you are looking for.

Yes it works