# Fetch youtube video completion response while playing it in IFrame based on youtube video id **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [September 6, 2024, 6:50am UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624 "2024-09-06T06:50:54Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![Sahana\_J](https://avatars.discourse-cdn.com/v4/letter/s/e480ec/32.png) [@Sahana\_J](https://forum.inductiveautomation.com/u/Sahana_J)\ **Post date:** [September 6, 2024, 6:50am UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/1 "2024-09-06T06:50:54Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/a/ea8b8e577b0b2e4fd81e2007d20f50ca1d20cfd7.png) Once the video in Iframe finish playing i need the particular topics checkbox to become True if not completed then it will remain False. and it is an youtube video in Iframe. How can i achieve this? I have also created API for this. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 6, 2024, 8:22am UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/2 "2024-09-06T08:22:03Z")
This one is a bit tricky since you will need some js First you'll need to import the youtube api: You will have to create an "injectables" folder here and put this text file in it. (adjust for install folder ofc) [head\_top.txt](https://forum.inductiveautomation.com/uploads/short-url/wjYaOU2WL7prYf1E8QbEprDf5PU.txt) (58 Bytes) ```python "C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\injectables\head_top.txt" ``` Than you will need some markdown with some code: Replace the binding value to the video id You will also have to add an domId to an element which will become the player. The scripts write to a custom property to say its done. you will have to handle your event on an onchange script on it or something. (dont forget to turn the boolean back off) Here is a sample 🙂 > **Summary** > > ```python > frameId = 'player' > propName = 'isYoutubeDone' > code = """ var player; > const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value; > function onYouTubePlayerAPIReady() { > player = new YT.Player('"""+frameId+"""', { > width: '100%', > height: '100%', > videoId: '"""+value+"""', > events: { > onReady: onPlayerReady, > onStateChange: onPlayerStateChange > } > }); > } > function onPlayerReady(event) { > event.target.playVideo(); > } > function onPlayerStateChange(event) { > if(event.data === 0) { > console.log('done'); > view.custom.write('"""+propName+"""', true); > } > } > onYouTubePlayerAPIReady(); > \">""".replace("\n", "").replace("\t", "") > return code > > > ``` [youtube\_api.zip](https://forum.inductiveautomation.com/uploads/short-url/9K5fCZQMQAzMVQp3l37hrX4VN52.zip) (5.2 KB) (`onPlayerReady` autoplays the video, you can remove this if not wanted) Do note that once you run this code, the designer might give you some trouble moving the components, so be sure to put the element **in a seperate container** first ---
**Author:** ![Sahana\_J](https://avatars.discourse-cdn.com/v4/letter/s/e480ec/32.png) [@Sahana\_J](https://forum.inductiveautomation.com/u/Sahana_J)\ **Post date:** [September 6, 2024, 9:06am UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/3 "2024-09-06T09:06:23Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/3/5318c3fb5e9540ca8f2b9d5d9039241b0fc852ef.png) I was trying in this form will this not work? but after fetching duration I am not getting how to compare it to get video status ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 6, 2024, 9:15am UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/4 "2024-09-06T09:15:23Z")
No that wont be enough, python has no access to the status of iframe. I do see the video player has a status property, idk if you can link youtube vids in those? or if you can download the video and just use this instead. > **[Perspective - Video Player | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-display-palette/perspective-video-player)** > > The Video Player component enables you to embed video or a live feed in Perspective views. ---
**Author:** ![Sahana\_J](https://avatars.discourse-cdn.com/v4/letter/s/e480ec/32.png) [@Sahana\_J](https://forum.inductiveautomation.com/u/Sahana_J)\ **Post date:** [September 6, 2024, 9:36am UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/5 "2024-09-06T09:36:56Z")
Yes but to a video player i cannot fetch video from Youtube it will only access downloaded videos. ---
**Author:** ![Nathan\_Moore](https://avatars.discourse-cdn.com/v4/letter/n/d78d45/32.png) [@Nathan\_Moore](https://forum.inductiveautomation.com/u/Nathan_Moore)\ **Post date:** [September 6, 2024, 9:38am UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/6 "2024-09-06T09:38:17Z")
I tried adding youtube\_api.zip and head\_top.txt and it worked perfectly. Nicely done. ---
**Author:** ![Sahana\_J](https://avatars.discourse-cdn.com/v4/letter/s/e480ec/32.png) [@Sahana\_J](https://forum.inductiveautomation.com/u/Sahana_J)\ **Post date:** [September 6, 2024, 9:39am UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/7 "2024-09-06T09:39:29Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/c/3c3d1b3e2ba8fb5a7823625cc9ab48ac8f90238c.png) So I was trying to add how you had told before but I am not getting what has to be assigned for frameId. ---
**Author:** ![Sahana\_J](https://avatars.discourse-cdn.com/v4/letter/s/e480ec/32.png) [@Sahana\_J](https://forum.inductiveautomation.com/u/Sahana_J)\ **Post date:** [September 6, 2024, 9:41am UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/8 "2024-09-06T09:41:54Z")
Hey may I know how you did it? ---
**Author:** ![Nathan\_Moore](https://avatars.discourse-cdn.com/v4/letter/n/d78d45/32.png) [@Nathan\_Moore](https://forum.inductiveautomation.com/u/Nathan_Moore)\ **Post date:** [September 6, 2024, 10:04am UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/9 "2024-09-06T10:04:25Z")
download youtube\_api.zip don't unzip it. In Designer press file \> Import and import the youtube\_api.zip It will bring in a view called 'youtube' within that view there is a coordinate view and inner label, this will become your player. There is also a markdown with an expression, if you edit the expression you can set your videoId in the top section. This markdown is what injects the js and sets the isYoutubeDone custom param to True. Now you need to import the head\_top.txt. Go to your ignition install location then /data/modules/com.inductiveautomation.perspective/ create a folder here called injectables, open and put the head\_top.txt file here. Naviagate to the 'youtube' view from a perspective session and tada! Should be working. ---
**Author:** ![Sahana\_J](https://avatars.discourse-cdn.com/v4/letter/s/e480ec/32.png) [@Sahana\_J](https://forum.inductiveautomation.com/u/Sahana_J)\ **Post date:** [September 6, 2024, 10:06am UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/10 "2024-09-06T10:06:42Z")
I got this but in my view the Youtube video links [YouTube](https://www.youtube.com/embed/IAhxYsMi4e8) are dynamically passed by fetching it from database that is where I am confused. ---
**Author:** ![Nathan\_Moore](https://avatars.discourse-cdn.com/v4/letter/n/d78d45/32.png) [@Nathan\_Moore](https://forum.inductiveautomation.com/u/Nathan_Moore)\ **Post date:** [September 6, 2024, 10:09am UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/11 "2024-09-06T10:09:04Z")
In that case you just need to update the binding on the markdown to a database query and then pass that result on to the reset of the markdown code. All it needs is the video\_id, you can get it there through any way you would normally move data around in Ignition. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 6, 2024, 10:39am UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/12 "2024-09-06T10:39:27Z")
you can not pass variables with `{}` in like that, just use the `"""+` like i did else it just gonna mess up with some js codes > [@victordcq](#): > > `videoId: '"""+value+"""',` The frameID need to be meta.domId, this is a property you **have to add manualy.** to the target component. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/b/9b16f93199bcbe9cdebc5ba032dd4db95c397bea.png) and the propname needs to be a the name to the property not the property value. This needs to be a **view custom** property, not one on self > [@victordcq](#): > > `propName = 'isYoutubeDone'` i can't see everything but idk why you would use value = currentValue, i think thats wrong ---
**Author:** ![Sahana\_J](https://avatars.discourse-cdn.com/v4/letter/s/e480ec/32.png) [@Sahana\_J](https://forum.inductiveautomation.com/u/Sahana_J)\ **Post date:** [September 9, 2024, 10:19am UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/13 "2024-09-09T10:19:38Z")
Hi, I am passing the video ids dynamically but it is playing only 1 video in the label rest just i am able to see that the id is changing in Markdown based on selection of topic but video is not coming in label. I need to pass videos dynamically from database. How can I do this ? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 9, 2024, 11:53am UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/14 "2024-09-09T11:53:58Z")
Could you provide the view, with **the bindings towards your database disabled** ---
**Author:** ![Sahana\_J](https://avatars.discourse-cdn.com/v4/letter/s/e480ec/32.png) [@Sahana\_J](https://forum.inductiveautomation.com/u/Sahana_J)\ **Post date:** [September 9, 2024, 12:11pm UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/17 "2024-09-09T12:11:49Z")
[Training\_App\_2024-09-09\_Youtube dynamic backup.zip](https://forum.inductiveautomation.com/uploads/short-url/6fnhswK4m673u7jkElPl1VrDbPM.zip) (28.3 KB) I have attached the backup here Kindly check. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 9, 2024, 1:32pm UTC](https://forum.inductiveautomation.com/t/fetch-youtube-video-completion-response-while-playing-it-in-iframe-based-on-youtube-video-id/95624/18 "2024-09-09T13:32:43Z")
Eh that view is quite the mess tbh You also did not disable all the bindings. but ahwelh You are making things a lot harder than they should be. Anyways it does seems like its the youtube API that is causing issues with the delayed data... or if the url changes after loading. But i kinda found a way to ignore this but its not super pretty. Instead of using embded views, you gotta use a repeater (or canvas). and delete all instances between changing url. Ofc you will have to do that in a script or something. I added in 2 other sample views. **do not touch the youtube view** , you only have to copy flex repeater into your own view and setup a mechanic to delete the instace and pass in the url afterwards. use bindings to the isDone[0] and store than somewhere else. use this somewhere else to add an onchange script. dont add onchance script on the instances of the flexrepeater [youtubeembed.zip](https://forum.inductiveautomation.com/uploads/short-url/d7XgfvM2MWpPhCp533JeQe0aiAd.zip) (36.6 KB)