14
Views
4
Comments
Solved
iframe attribute

Hi,

I want to display YouTube video at runtime when I click on the button. 

Here https://youtu.be this part remain common we'll only paste only ID

I am using iFrame and if I use src propertyl; it displays on the browser. 

But when I unable to display at runtime 



URL :  https://youtu.be [by Default value for the local variable]



In YouTubeId local variable I am holding Input widget's value where I will enter youtube ID


mvp_badge
MVP
Rank: #76
Solution

Hi Steave,

Try with the YouTube embed url, along with the (concatenated) respective vidoeId as shown below.

"https://www.youtube.com/embed/"

See this Sample App - YTB/Iframe

PS: Sorry! I also observed that the IFrame video is not reflecting with the FinalYoutID var runtime value change. 

Workaround: 

1) In the button action flow introduce a JS node with 2 input parameter i.e. IframeId and YoutubeVideoId

2) Define the below mentioned JS code to update the src value.

document.querySelector('#' + $parameters.IframeId).src = "https://www.youtube.com/embed/" + $parameters.YoutubeVideoId;


Hope this helps you!


Kind regards,

Benjith Sam

Rank: #70

Hi Steave,


Perhaps you want to try the component YoutubeReactive?

It has a Try Now option so you can see if it works according to your needs and a Demo that you can download to see how to use it.


Hope it helps.


Regards,
João

mvp_badge
MVP
Rank: #76
Solution

Hi Steave,

Try with the YouTube embed url, along with the (concatenated) respective vidoeId as shown below.

"https://www.youtube.com/embed/"

See this Sample App - YTB/Iframe

PS: Sorry! I also observed that the IFrame video is not reflecting with the FinalYoutID var runtime value change. 

Workaround: 

1) In the button action flow introduce a JS node with 2 input parameter i.e. IframeId and YoutubeVideoId

2) Define the below mentioned JS code to update the src value.

document.querySelector('#' + $parameters.IframeId).src = "https://www.youtube.com/embed/" + $parameters.YoutubeVideoId;


Hope this helps you!


Kind regards,

Benjith Sam