Resizable iFrame using Custom Element

Hello Velo users,

This is a short demo on how you can create an iFrame inside a Custom element

We can create iFrame using the editor by drag and droping iFrame Element but in some cases we hit limitation. cause Wix iFrame is an iFrame inside of an iFrame.

Site >> iFrame ( iFrame A ) >> iFrame ( iFrame B ).

iFrame A - you can't access it

iFrame B - is where we can run our code. 

Since we can't access the iFrame A, we lose some functionality and one of them is resizing it.

This is where Custom element can help.

We can use Custom element to create an iFrame and set the style to resizable

And this allows the user to resize the iFrame as much as needed and push the adjacent element.

Copy and paste the below code in the file public/custom-elements/<file-name> 

class CustomEl extends HTMLElement {
 constructor() {
   super();
   const shadow = this.attachShadow({mode: 'open'});
   const iframe = document.createElement("iframe");
   iframe.src="http://localhost:8080";
   iframe.style = "resize:both"
   shadow.append(iframe)
 }
}

customElements.define('custom-el', CustomEl);

1. Drag and Drop the Custom element under the embed section. 2. Select the File radio buttom and on the dropdown select the file name, where you pasted the code.

3. Set the tag name as custom-el 4. Publish it and open the page. It should display a iFrame that can be resized. You need to change the iframe source to the URL you want to display. in line 6.

iframe.src = "<Your HTTP URL>"

Notes: "resize: both" allow you to resize the iFrame, if you want to constraint vertical and horizontal resize Check this link on to use it. https://www.w3schools.com/cssref/css3_pr_resize.asp Links:

Wix Editor: Adding a Custom Element to Your Site Thank you