Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Editor X

Design your boldest creations.

Jul 30

New Feature Alert: Html iFrame

You can now embed Html code or any website address into the site page.


Please share your feedback with us.


Jul 30

Awesome! Waiting for the slideshows update. Hope it will come soon.

Jul 30

Cannot wait for slideshows & header animations! I also want a "anchor to scroll" feature where you can scroll or swipe once and go to the next section. mostly used for 100% VH sections.

Jul 30

Yep. Saw that site you referenced in your comment. It was beautiful!

Nice. Any chance of connecting to a dynamic page's dataset?

You can do this with a little bit of code. I'm pretty sure I got this idea from this forum ages ago to use on the classic editor, so you may already know this workaround and it won't be helpful for what you want to do, but just in case:


For my example I'm embedding video playlsits from YouTube on my dynamic pages. So each dynamic page would show a different YouTube playlist. This is the only code I'm using:


$w.onReady( () => {

$w("#dynamicDataset").onReady( () => {

const itemUrl = $w('#dynamicDataset').getCurrentItem().playlist;

$w('#embed').src = itemUrl;

} );

} );


the .playlist relates to a text field in my dataset called playlist which contains the different playlist urls like this random one I just found as an example:


https://www.youtube.com/embed/videoseries?list=PL4o29bINVT4EG_y-k5jGoOu3-Am8Nvi10



and the #embed part of the code is just the name I gave the html playlist element that I want to connect to dynamically, I think iFrame elements are called "html" by default. And that is all there is to it really.


I've also done the same thing with music players embedded from Bandcamp so that each different album or EP has it's own dynamic page containing it's own individual embedded music player so you can listen to that specific music on that specific page. I'm sure it'd work for Soundcloud or Spotify too if they have embedded widgets. It's exactly the same code as I used above in the video playlist example though.


I don't know specifically what the content is that you want to dynamically embed in your own situation, but it is probably similar enough to those 2 examples that we could easily figure it out if this is any use to you! :)


I would love to be able to connect dynamically without using code in the future though, it would be much less work than this workaround for sure, but it works for now!

Jul 30Edited: Jul 30

Hi, I need to insert two script code, one in page (and I use Iframe) and one in tag HEAD. How can insert HTML code in tag HEAD?


Hi

I have an other question: where could we learn more about HTML coding to improve a site but on Editor X?

6d agoEdited: 6d ago

I'm so glad to have this feature for Editor X, however I presume you'd have to do some kind of coding (if it is even currently possible at all?) to make it usable across any of the smaller breakpoints when your embedded widget is almost guaranteed to be wider than the smaller breakpoints in the first place?


For example, a normal wix video container element will automatically shrink to be the correct size to fit on screen across all the different breakpoints, but if you use the html element to insert a video playlist element the same size as that wix video container it will remain at that initial size across all views, meaning most of the html playlist element will be off screen and look terrible ruining the site design on any breakpoints with a smaller width than the widget size.


This will be a problem for the vast majority of widgets since they're likely to be wider than the smallest breakpoint to start with (like the map in the example at the top of the page in fact, I can't imagine that would look good at all in smaller mobile views hanging off the side of the page?).


Does anyone have any ideas on how to get around this, it'll likely be a different problem depending on the proportions and complexity of any given widget so I can see that being a nightmare to get a simple catch-all coding fix?


The only real way around it I can think of right now is to add multiple copies of your html element and change the code of each to match a different screen size and then hide all but the right size copy on each different view... which would be REALLY time consuming and complicated, as well as the fact certain widgets might not allow you to change the proportions so easily? I'm stumped...