115
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


2021-03-18 21-03-15
Benjith Sam
 
MVP
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

UserImage.jpg
Shaun11

thanks Benjith. 

it is working fine now..

2021-03-18 21-03-15
Benjith Sam
 
MVP

You're welcome, Steave :)

Glad to help you :)


Kind regards,

Benjith Sam

2018-10-29 08-31-03
João Marques
 
MVP

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

2021-03-18 21-03-15
Benjith Sam
 
MVP
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

UserImage.jpg
Shaun11

thanks Benjith. 

it is working fine now..

2021-03-18 21-03-15
Benjith Sam
 
MVP

You're welcome, Steave :)

Glad to help you :)


Kind regards,

Benjith Sam

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.