Custom Block iFrame Preview in Panel

[nsw]

Hello, I’ve been trying to make a custom block for embedding audio. Everything on the frontend seems to be working well, however, I am struggling to get the preview in the panel to display the iframe source correctly.

I’ve tried setting up the index.js file the way I learned how to in this example from the cookbook.

panel.plugin("cookbook/audio-block", {
    blocks: {
        audio: {
        template: `
        <div>
            <iframe>
                <source :src="content.audiosource[0].url">
            </iframe>
        </div>
        `
        }
    }
});

I’ve also tried like this but still no success:

panel.plugin("cookbook/audio-block", {
    blocks: {
        audio: {
        template: `
        <div>
            <iframe src="{{ content.audiosource }}"></iframe>
        </div>
        `
        }
    }
});

Are you able to let me know what I am doing incorrectly?

Thank you for your time

[texnixe]

What’s the iframe for?

[nsw]

Hi texnixe, the iframe is for audio embeded from sites like mixcloud or soundcloud.

[texnixe]

Ok, the first example is wrong syntax, an iframe tag cannot 't have source children.

In your second example, what does the audiosource field contain? You would need a url.

[nsw]

As an example, if I enter the following url in the audiosource field

https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1330828411&color=%233e2726&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true

then it will correctly display in the frontend like this:

<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1330828411&amp;color=%233e2726&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true&amp;visual=true"></iframe>

I can also see that url in the panel preview if the index.js file looks like this:

panel.plugin("cookbook/audio-block", {
    blocks: {
        audio: {
        template: `
        <div>
            <p>{{ content.audiosource }}</p>
        </div>
        `
        }
    }
});

However, if index.js looks like this:

panel.plugin("cookbook/audio-block", {
    blocks: {
        audio: {
        template: `
        <div>
            <iframe src="{{ content.audiosource }}"></iframe>
        </div>
        `
        }
    }
});

then the block in the panel looks like this:

[nsw]

I’m sorry to say I’m still struggling with this. Does the issue make sense the way I’ve presented it? Thank you for your time.

[duncanmunro]

Have you tried <iframe :src="content.audiosource"></iframe> ?

[nsw]

Thank you!