How to get embed code from database to HTML iframe

Ask the community
,
1

Hello!

I have a dynamic page (in Slovak language) which consists from several parts - heading, text and soundcloud player(HTML iframe). Can someone explain me, how can I get an embed code from my dataset to HTML iframe, please?

This is my dataset:

1129×407 14.8 KB

And my dynamic page:
I want to get the embed code from dataset to #html1

921×551 201 KB

And this is how I want it to look like:

903×512 223 KB

I´m new to HTML, I will be happy for any help! … or if someone can send me the whole code I would be really thankful :smiley:

Thank you

Patrik

2

Hi Patrik,

Since the HTML IFrame is real IFrame, the normal way to communicate with it is by sending messages. Basically what you need to do is:
On the page side:

  • get the relevant data from the collection via dataset
  • send message to the iframe with the content you want to load
    On the iframe side:
  • add listener for messages
  • on message - to take the sent data and to load it into the body (or wherever you need it in the iframe)

Here is more details on how to work with HTML components and some examples: HtmlComponent - Velo API Reference - Wix.com
[see the example for the postMessage() - it sends " Message from page code! " text to the IFrame and it is then displayed in the IFrame’s demo element. You might want to replace the whole body in your case, but the idea is the same)

In order to get the current item in the dynamic page, you need to use this API:

*You might get some additional info from this article:
“Working with the HTML Element in Wix Code” - Velo: Working with the HTML iframe Element | Help Center | Wix.com

3

Same problem here, my case is I want to embed a video, just like this

1920×1080 295 KB

is that possible to add that blank iframe into a dataset, so I can fill and connect into dynamic page?, I really newbie bout a code

4

Hi there,
I am not a developer and have no knowledge of programming, Can I, and others like me can get an example code to insert with simple explanations? some kind of “manual” …
I’m trying to do exactly what this post is about but no luck so far…
It is kind of very important ability to have in websites so…
Thank you.

5

Hi and thank you for you response.
I read every post and look for any video and I still can get what am I doing wrong.
I abandoned the I dea of Iframe and just want to shoe embedded website in the html box. This is what I did:
In the data base: created a field (URL type):

In the dynamic page: insert an “embed a site” element:

$w(“#dynamicDataset”).onReady(() => {
const EngMap = $w(‘#dynamicDataset’).getCurrentItem().EngMap;
$w(‘#html4’).src = EngMap;
});
});

Published the site
Getting:
Wix code SDK error: The url parameter that is passed to the src method cannot be set to the value . It must be of type url

And gray html box…
Please help…

6

Hmmm…even I am a newbie to coding so forgive me if I can’t help you. But use “let” instead of “const”. Also let us make a distinction between the variable “EngMap” and the field title “EngMap”. So this will be in your code panel:

$w.onReady(function () {
//To load the page before running the code
	$w("#dynamicDataset").onReady(function () { 
	//To load the dynamic dataset's data before running the following code
		
		let EngMapVar = $w('#dynamicDataset').getCurrentItem().EngMap; 
//we create a variable, NOT a CONSTANT, called "EngMapVar" and set its value to the URL we have //put in our data collection. Make sure "EngMap" is a URL type field in your data collection //containing URLs only!I think even that can be generating the error you are seeing in red. Not //sure though.
		$w("#html4").src = EngMapVar; 
		//We set the html4's value to that of "EngMapVar".
                       
	})
});
7

I had the same problem.
This fix might work:

$w.onReady(() => {
$w( “#dynamicDataset” ).onReady( () => {
let item = $w( “#dynamicDataset” ).getCurrentItem();
let url = item.EngMap;
$w( “#html4” ).src = url;
})
})

It worked for me.

If you still have trouble, check out this post (it helped me):
https://www.wix.com/corvid/forum/community-discussion/how-to-make-an-html-element-src-dynamic

8

hi @patomelis did you get to do it?

9

Hey, unfortunately no, that project was cancelled in the end so I didn’t get the chance to finish it :confused: