Possible to dynamically change html, specifically within an iFrame?

Wappler General How To
#1

Not much on the forum relating to this, I know you can insert double curly’s or just use the inspector to add data to most elements, but what I’m trying to do is add a dynamic property on a youtube video embed iframe snippet, e.g. the video ID - so then I could switch out which video is displaying based on the id in the dB.

I’ve tried the curly brackets within the iFrame on the YouTube video embed url, and I’ve tested the same curly brackets as a basic paragraph element - it displays the right data but it doesn’t appear to work with a video within an iFrame.

This is what I’ve tried:

<iframe width="100%" height="315" src="https://www.youtube.com/embed/{{get_pitch_page_data.data.load_pitch_data[0].video_youtube_id}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
#2

Your syntax doesn’t look right. To make an HTML attribute dynamic you need to add dmx-bind: in front of it. Also the static part needs to be wrapped in single quotes and you don’t need curly brackets for the dynamic part.
Not sure if this is going to work with iframes but please try:

dmx-bind:src="'https://www.youtube.com/embed/' + get_pitch_page_data.data.load_pitch_data[0].video_youtube_id"
1 Like
#3

This worked perfectly, thank you! Lot to learn still.

2 Likes
#4

Sorry for bumping this up, but I was trying to achieve kinda the same - but it wouldn’t work.
I have variable which holds PDF file filename and I would like to dynamically display it inside the page.

<dmx-value id="var1" dmx-bind:value="'Q2021-1.pdf'"></dmx-value>
And display code is: <div class="col-12"><embed dmx-bind:src="'pdf/' + var1.value" type="application/pdf" width="100%" height="600px"></div>

Could you please help me out with this?
Server type: NodeJS

With this code works as expected: <div class="col-12"><embed src="pdf/Q2021-1.pdf" type="application/pdf" width="100%" height="600px"></div> but this one - doesn’t - <div class="col-12"><embed type="application/pdf" width="100%" height="600px" dmx-bind:src="'pdf/Q2021-1.pdf'"></div>

#5

Most likely, the var1 isn’t in the same scope as the embed element. Can you post the full code to show both parts in context?

#6

I’ve tried to type in dmx bind full path to the file (without using variables) and it won’t work either:

<div class="container">
    <div class="row">
        <div class="col-12"><embed type="application/pdf" width="100%" height="600px" dmx-bind:src="'pdf/Q2021-1.pdf'"></div>
        <div class="col-12">
        </div>
    </div>
</div>
#7

in which case it may be to do with how the render into the DOM. You may not be able to update an embed src once it has rendered. @patrick?

#8

Just a thought. Could you create a placeholder pdf that’s 600px high that is the static src. I wonder if it needs a src property when added to the DOM before it gets updated by the dmx-bind

you would end up with something like:

<embed type="application/pdf" width="100%" height="600px" src="pdf/placeholder.pdf" dmx-bind:src="'pdf/Q2021-1.pdf'">
#9

I got your workaround idea, but unfortunately it won’t work:

{"status":"404","message":"/pdf/placeholder.pdf not found."}

#10

you’ll need to create the pdf called placeholder.pdf an upload it to the pdf folder on your server

#11

@bpj and it’s just loads this “placeholder.pdf” file without processing dmx-bind:src part.

#12

OK I think this is one for the Wappler team. It will probably be something to do with how embed works and the scope that dmx-bind can apply to. As this thread has been marked as solved, it might be worth adding it as a separate topic

#13

@bpj Thank you mate for trying to help me. Will create a separate topic.

1 Like