Copy <iframe src="[src link]"
style="border: none; margin: 0; width: 100%; height: 900px"
id="3d-configurator-iframe"
scrolling="no"
frameborder="1"
allowfullscreen >
</iframe>
In addition to using the HTML iFrame code, you can also use JavaScript alongside it to better define your embedding with more settings.
Copy <script>
const iframe = document.getElementById("3d-configurator-iframe");
const widthIframe = 1200;
const heightIframe = 800;
const paddingWidth = 0;
const paddingHeight = 0;
let iframeOrigin = "";
let mobileWidth = 0;
let full = false;
iframe.style.width = `${widthIframe}px`;
iframe.style.height = `${heightIframe}px`;
const handleResize = () => {
if (!full) {
if (iframe.parentNode.clientWidth - paddingWidth <= widthIframe) {
iframe.style.width = `${iframe.parentNode.clientWidth - paddingWidth}px`;
} else {
iframe.style.width = `${widthIframe}px`;
}
if (iframe.parentNode.clientHeight - paddingHeight <= heightIframe) {
iframe.style.height = `${iframe.parentNode.clientHeight - paddingHeight}px`;
} else {
if (iframe.parentNode.clientWidth - paddingWidth <= mobileWidth) iframe.style.height = `${heightIframe}px`;
}
}
if (iframeOrigin) {
iframe.contentWindow.postMessage(
{
type: "DIMENSIONS",
windowW: iframe.parentNode.clientWidth - paddingWidth,
windowH: iframe.parentNode.clientHeight - paddingHeight,
iframeW: iframe.clientWidth,
iframeH: iframe.clientHeight,
},
iframeOrigin
);
};
};
window.addEventListener("resize", handleResize);
handleResize();
window.addEventListener("message", (event) => {
if (event.data?.type === "GET_DIMENSIONS") {
mobileWidth = event.data?.mobileWidth;
iframeOrigin = event.origin;
handleResize();
}
if (event.data?.type === "FULLPAGE") {
if (event.data?.value === true) {
full = true;
iframe.style.width = "100%";
iframe.style.height = "100%";
iframe.style.position = "fixed";
iframe.style.top = "0";
iframe.style.left = "0";
} else {
full = false;
iframe.style.width = `${widthIframe}px`;
iframe.style.height = `${heightIframe}px`;
iframe.style.position = "";
}
}
});
</script>