Game anchoring is not adjustable in iframe

Anchoring is not adjustable in an iframe even I place the game and its buttons moved from its actual position. Visualize are at a different place while buttons response are at different place need your help

Hey @HasnainX, could you please send the code for the iframe, and perhaps some screenshots? It will help us understand better so we can help you out.

its look like this


var IframePlane = pc.createScript(‘iframePlane’);
IframePlane.attributes.add(‘iframeUrl’, {type: ‘string’});
IframePlane.attributes.add(‘pixelsPerUnit’, {
type: ‘number’,
default: 640,
description: ‘Number of canvas pixels per unit of world space. The larger the number, the higher the resolution of the iframe.’

// initialize code called once per entity
IframePlane.prototype.initialize = function() {
// WARNING: IframePlane does not work with touch events

var element;

if (this.iframeUrl) {
    element = document.createElement("iframe");
    element.src = this.iframeUrl; = '0px';'fixed';
    // '100%';
} else
    element = null;

this._css3Plane = new pc.Css3Plane(element, this.entity, this.pixelsPerUnit);

var material = new pc.StandardMaterial();
material.depthWrite = true;
material.redWrite = false;
material.greenWrite = false;
material.blueWrite = false;
material.alphaWrite = false;
material.blendType = pc.BLEND_NONE;
material.opacity = 0;

this.entity.model.material = material;

this.on('destroy', function() {
}, this);

this.on('enable', function() {
}, this);

this.on('disable', function() {
}, this);


Have you seen the code?

@HasnainX, going by the picture, the issue is in the published build, correct? Can you try with the “e”(non iframed) build? For example, for one of our games, the regular build link is, while the non-iframed build is the e before the p).

If I understand correctly, are you trying to insert an iframe into your PlayCanvas app? In that case, does the iframe work correctly if you try in an empty HTML page?

1 Like

@DevilZ sorry for the later reply yes I insert a game into an iframe but the problem is button’s functionality are working at different places.

Would you be able to share the project please or a cut down version that has the issue?

1 Like


Note: This issue occur only mobile device.Visualize are at a different place while buttons response are at different place

Do you need to use the 3D iframe with CSS3D? It looks like it would be easier to use a normal iframe?

Do you mean to use a normal iframe?

It depends on what you are looking to do but from the project you have shared, it looks like it be easier use a standard iframe.

What are you trying to do with the iframe?

1 Like