Setting the YouTube video ID at runtime

[Kal]

I would like to set the YouTube video ID at runtime, rather than at design time. Is there a way to do this?

[Alena Prykhodko]

Hello Kal,

Please look at a similar question https://getsatisfaction.com/apperyio/...

[Kal]

Thanks!

[Kal]

Alena, I tried this, but it does not work. Here is what I did:

1. I set up a YouTube component per the following screen shot:

   

2. I use the following code in the Page Load of the page containing the component:

   code
   Appery('kioskYoutube').attr("data-video-id", localStorage.getItem('youtubeVideoId'));
   /code

   (I made sure that the localStorage has the right value in youtubeVideoId).

   When the player comes up, it says "An error occurred, please try again later". If I use the same video ID statically by entering it into the component properties, it works just fine.

   What am I doing wrong?

   -Kal.

[Evgene Karachevtsev]

Hello Kal,

You may use this code:
preAppery('kioskYoutube').attr("src", "https://www.youtube.com/embed/"+ localStorage.getItem('youtubeVideoId') + "?loop=1&enablejsapi=1&origin=https%3A%2F%2Fappery.io");/pre

[Kal]

Evgene, thanks, this works, but I have two problems:

1. It does not loop, even though your command says loop=1.

2. It shows the YouTube transport control at the bottom of the video, I would like to hide that.

   Thanks,
   -Kal.

[Evgene Karachevtsev]

Kal,

Could you please try this code:
preAppery('kioskYoutube').attr("src", "https://www.youtube.com/embed/"+ localStorage.getItem('youtubeVideoId') + "?autoplay=1&loop=1&controls=0&showinfo=0&playlist="+localStorage.getItem('youtubeVideoId')+"&enablejsapi=1&origin=https%3A%2F%2Fappery.io");/pre

[Kal]

Thanks, Evgene! This works perfectly!