Game anchoring is not adjustable in iframe

Help & Support
#1

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

#2

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.

#3

image
image291×529 14.5 KB

its look like this

-----------CODE---------------

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;
    element.style.border = '0px';
    element.style.position='fixed';
    // element.style.maxWidth= '100%';
    // element.style.maxHeight='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;
material.update();

this.entity.model.material = material;




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

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

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

};

#4

Have you seen the code?

#5

@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 https://playcanv.as/p/1Xcb3yxj/, while the non-iframed build is https://playcanv.as/e/p/1Xcb3yxj/(Note 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
#6

@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.

image
image901×640 45.2 KB

#7

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

1 Like
#9

Sure

https://playcanvas.com/editor/scene/1208955

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

#10

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

#11

Do you mean to use a normal iframe?

#12

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