Dynamic Pages with Embeds (Youtube, Iframe etc)

Ask the community
,
1

Hi All,

I have some dynamic client pages on a site we are building that need to have two things added per page:

  1. A youtube video, populated from URL field in the dataset
  2. A payment widget that is a iframe (embedded page, 600x300 see below) from either a text or URL field in the dataset

I can’t seem to get either of these to work, I’m able to add a youtube video and link it to dataset and source, but it seems to stay on the default one (The wanderlust video) when previewing. If I add an embed it doesn’t give any option to link to the dataset.

The widget embed code looks like this:

Each dynamic page will have the same iframe with a different src. Right now I’m using the front end WYSIWYG editor, haven’t jumped into the corvid code before, but I’m assuming it can’t be too hard if I know where/what to edit.

2

Try this for the html, im no coder but its what i cobbled together for my page

View Ranger is the link i used you may call it something else ie; youtube


 // Get url address  for view ranger link below this point
 
 let viewRangerLinkvar = $w('#dynamicDataset').getCurrentItem().viewRangerLink; 
//Create a variable, called "viewRangerLinkVar" and set its value to the URL we have //put in your data collection. Make sure "viewRangerLink" is a URL type field in your data collection //containing URLs only NOT html!
    $w("#html1").src = viewRangerLinkvar; 
 //Set the html1's value to that of "viewRangerLinkVar".
 
  })
});

// view ranger link code end here
3

Thanks for that - I’m completely new to actually playing with code + corvid… do you have an example of it live on your page and where exactly you put the code?

4

also @dean is this code for the embed widget or to get the youtube stuff working?

5

Hi its just the youtube part, sorry the widget i have no idea

6

Not on a live site now as i have unpublished it to work on it.

Here is the editor page #html1

1365×625 275 KB

here is the preview

1365×625 214 KB

I have my code placed anywhere as it dont matter on my page, but yours maybe different.

What is the field name you have the you tube link in your collection database?

For example mine is in View Ranger Link and the field is viewRangerLink also make sure its set to URL not text

1365×625 57 KB

7

When you say you are placing the code anywhere in the page, are you using the wix editor, or are you dropping it in the code at the bottom of the page.

8

in the code at the bottom of the page

9

First off, for the YouTube video, you can simply do exactly what is on this Wix example here.
https://support.wix.com/en/article/corvid-tutorial-hiding-a-video-player-when-there-is-no-video-to-play

As for the iFrame and the html script given, as you are looking at using the src function of the html component, then this must be a URL which is obtained from a field in your dataset that is of URL type, it can’t be a text type field.

https://www.wix.com/corvid/reference/$w.HtmlComponent.html#src
Sets or gets the URL of the HTML Component’s code.

However, as your html code includes a url in it…

<iframe
                      frameborder="0"
                      width="300"
                      height="600"
                      scrolling="no"
                      src="(((URL GOES HERE)))">
                  </iframe>

I would suggest that you simply try pasting that given URL into a web browser and see where it goes, if it does or shows what you are after then simply add another URL field as you did for the video example above.

Next strip out all the supplied html code apart from the URL, so the only thing that you have from the html code in the field is the URL itself.

Then you have a choice to make.

You can do exactly the same as the video example above and only show the iFrame if you have a URL for it in the field.

Or you can simply get the current items of the dynamic page and set the iFrame to the URL from the pages current items, which would be your URL field from your dataset and you need to use the field key and not the field name.

$w.onReady( () => {
$w("#dynamicDataset").onReady( () => {
let itemObj = $w("#dynamicDataset").getCurrentItem();
console.log(itemObj.url);
$w('#html1').src = itemObj.url;
});
});

Or you can try like this.

$w.onReady( () => {
$w("#dynamicDataset").onReady( () => {
const itemUrl = $w('#dynamicDataset').getCurrentItem().url
$w('#html1').src = itemUrl
});
});

It looks like you might have taken your code from here.

In which case, please add it fully with all the code as shown on the example.

$w.onReady( () => {
$w("#dynamicDataset").onReady( () => {
$w("#html1").scrolling = "no"; 
let widget = $w('#dynamicDataset').getCurrentItem().your-url-field-key-goes-here; 
$w("#html1").src = widget; 
});
});
// change widget to whatever you want it to be know as //
10

Ok, so I feel like I’m really close - I’ve got the video mostly working. The Widget is the bit that I’m stuck on and need to get working.

I’m using the following code:

$w.onReady( () => {
$w("#dynamicDataset").onReady( () => {
$w("#html5").scrolling = "no"; 
let widget = $w('#dynamicDataset').getCurrentItem().widgetLink; 
$w("#html5").src = widget; 
});
});
// change widget to whatever you want it to be know as //

where widgetLink is the field key from the dynamic dataset “Clients”. html5 is the widget…

331×576 9.4 KB

All of the links in the dataset are correct, tested and embeddable normally.

Yet this is how its appearing:

485×720 10.1 KB

What am I doing wrong? I feel like it’s really close, and theres jsut one thing I need to change?

11

Anyone? Am stuck on this. Would love any help or suggestions on this.

12

Bumping because I’m still stuck

13

I’m trying to accomplish something similar; I want to dynamically display bandcamp albums with their iframe embed code on band profile pages.

14

Was anyone able to figure this out?

15

import wixData from ‘wix-data’ ;
import wixLocation from ‘wix-location’ ;

$w . onReady (()=>{
$w ( “#yournamedynamicDataset” ). onReady (()=> {
const itemUrl = $w ( ‘#yournamedynamicDataset’ ). getCurrentItem ();
$w ( ‘#html1’ ). src = itemUrl .yourFieldkeydatabase;
$w ( ‘#html2’ ). src = itemUrl .yourFieldkeydatabase;
});
});

but in case, some website refuse to link use “regular” URL
so you need to use code widgetlink to embed site