play youtube video in react page and fire an action when video completes

in traditional web there is a great forge plugin for playing a youtube video and it fires an action when the video completes.  Looks like there is not a react version.  Has anyone been able to play a youtube video and fire an action when the video completes?

Jason, I've just finished a quick component that uses the YouTube IFrame Player API (https://developers.google.com/youtube/iframe_api_reference).

I just need to do a little more testing and cleanup and I'll upload it to the Forge and post a link.

It's very simple at the moment, allowing you to set the Height and Width, and Video ID, and it will embed the video at that size, and also provides an event for when the video ends.

G. Andrew Duthie wrote:

Jason, I've just finished a quick component that uses the YouTube IFrame Player API (https://developers.google.com/youtube/iframe_api_reference).

I just need to do a little more testing and cleanup and I'll upload it to the Forge and post a link.

It's very simple at the moment, allowing you to set the Height and Width, and Video ID, and it will embed the video at that size, and also provides an event for when the video ends.

Excellent thank you!  Please let me know once posted.  I am very interested to see how you handled the javascript.


Jason Herrington wrote:

Excellent thank you!  Please let me know once posted.  I am very interested to see how you handled the javascript.


Before I go ahead and publish this, here's the v1 version if you wouldn't mind giving it a try. It's really as simple as setting the videoId, height, and width properties, and optionally adding a handler for the OnVideoComplete event, if you want to do something when the video ends. OML attached.

Please let me know if you run into any issues with it. Would like to get it posted to the Forge soon.


G. Andrew Duthie wrote:

Jason Herrington wrote:

Excellent thank you!  Please let me know once posted.  I am very interested to see how you handled the javascript.


Before I go ahead and publish this, here's the v1 version if you wouldn't mind giving it a try. It's really as simple as setting the videoId, height, and width properties, and optionally adding a handler for the OnVideoComplete event, if you want to do something when the video ends. OML attached.

Please let me know if you run into any issues with it. Would like to get it posted to the Forge soon.


Trying this out now - thank you again!


G. Andrew Duthie wrote:

Jason Herrington wrote:

Excellent thank you!  Please let me know once posted.  I am very interested to see how you handled the javascript.


Before I go ahead and publish this, here's the v1 version if you wouldn't mind giving it a try. It's really as simple as setting the videoId, height, and width properties, and optionally adding a handler for the OnVideoComplete event, if you want to do something when the video ends. OML attached.

Please let me know if you run into any issues with it. Would like to get it posted to the Forge soon.


Andrew - I added the youtube widget and even with a hard coded id the viewer is not showing up.  I do get these errors in console: TrainingTest:1 A cookie associated with a cross-site resource at http://youtube.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
TrainingTest:1 A cookie associated with a cross-site resource at https://youtube.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.


G. Andrew Duthie wrote:

Jason Herrington wrote:

Excellent thank you!  Please let me know once posted.  I am very interested to see how you handled the javascript.


Before I go ahead and publish this, here's the v1 version if you wouldn't mind giving it a try. It's really as simple as setting the videoId, height, and width properties, and optionally adding a handler for the OnVideoComplete event, if you want to do something when the video ends. OML attached.

Please let me know if you run into any issues with it. Would like to get it posted to the Forge soon.


Settings I am using: videoid uSD4vsh1zDA and H and W 800.


G. Andrew Duthie wrote:

Jason Herrington wrote:

Excellent thank you!  Please let me know once posted.  I am very interested to see how you handled the javascript.


Before I go ahead and publish this, here's the v1 version if you wouldn't mind giving it a try. It's really as simple as setting the videoId, height, and width properties, and optionally adding a handler for the OnVideoComplete event, if you want to do something when the video ends. OML attached.

Please let me know if you run into any issues with it. Would like to get it posted to the Forge soon.


I got it working - the issue was that in the block required script you hard coded the player container id as "b3-player" when on mine that was actually "b4-player".  Not sure what/when that changes but I changed the page script to be b4-player and then it shows up.  Not sure if we can add inputs to page required scripts like that.

G. Andrew Duthie wrote:

Jason Herrington wrote:

Excellent thank you!  Please let me know once posted.  I am very interested to see how you handled the javascript.


Before I go ahead and publish this, here's the v1 version if you wouldn't mind giving it a try. It's really as simple as setting the videoId, height, and width properties, and optionally adding a handler for the OnVideoComplete event, if you want to do something when the video ends. OML attached.

Please let me know if you run into any issues with it. Would like to get it posted to the Forge soon.


Ok - so I have tested it (with the change for "b3" to "b4" as listed above) and it works!  I am able to load the page with it hidden under an if or not hidden under an if, change the state of the if via the react auto refresh on changing the if boolean and the video player works and the video end detect works in both cases.  Great work!


Sweet. Glad you found a workaround. I had wondered about the player ID. I'll see if I can figure out a more reliable way of getting the ID of the div element (may just need to give it a name and use name.id similar to traditional web, but I've not tested that yet). Once I have it working, I'll share an updated version.

Thanks for testing it out!

G. Andrew Duthie wrote:

Sweet. Glad you found a workaround. I had wondered about the player ID. I'll see if I can figure out a more reliable way of getting the ID of the div element (may just need to give it a name and use name.id similar to traditional web, but I've not tested that yet). Once I have it working, I'll share an updated version.

Thanks for testing it out!

The issue there is that I think you can not pass an input to a required page script like that - you might have to move that required script to be on the page itself with an input.  Although I am not sure what changes that name.


Jason Herrington wrote:

Ok - so I have tested it (with the change for "b3" to "b4" as listed above) and it works!  I am able to load the page with it hidden under an if or not hidden under an if, change the state of the if via the react auto refresh on changing the if boolean and the video player works and the video end detect works in both cases.  Great work!

I've modified the component to get the ID dynamically, so it should now work without any hard-coding of the div ID. Can you give this version a try, please?


G. Andrew Duthie wrote:

Jason Herrington wrote:

Ok - so I have tested it (with the change for "b3" to "b4" as listed above) and it works!  I am able to load the page with it hidden under an if or not hidden under an if, change the state of the if via the react auto refresh on changing the if boolean and the video player works and the video end detect works in both cases.  Great work!

I've modified the component to get the ID dynamically, so it should now work without any hard-coding of the div ID. Can you give this version a try, please?


trying now


G. Andrew Duthie wrote:

Jason Herrington wrote:

Ok - so I have tested it (with the change for "b3" to "b4" as listed above) and it works!  I am able to load the page with it hidden under an if or not hidden under an if, change the state of the if via the react auto refresh on changing the if boolean and the video player works and the video end detect works in both cases.  Great work!

I've modified the component to get the ID dynamically, so it should now work without any hard-coding of the div ID. Can you give this version a try, please?


That works for me!  Thank you again for doing this!


Jason Herrington wrote:

That works for me!  Thank you again for doing this!

My pleasure...I was wanting to do something for Reactive anyway, so this gave me an excuse to get off my behind and do it. I'll publish to the Forge shortly, and add a note here, in case you want to use the Forge version for any future updates.


G. Andrew Duthie wrote:

Jason Herrington wrote:

That works for me!  Thank you again for doing this!

My pleasure...I was wanting to do something for Reactive anyway, so this gave me an excuse to get off my behind and do it. I'll publish to the Forge shortly, and add a note here, in case you want to use the Forge version for any future updates.


Reactive is very cool - but hate that it takes a full rewrite of visual side of interface.  One thing to note - unless its relatively small don't use the "on parameters change" feature for blocks.  If you do it literally does the data refreshes one after another - not asynch - which kinda sucks.  We found a way around it by putting each block inside a wrapper block that if it needs to refresh it throws an action to the wrapper and then the block inside refreshes as it should in react.  Once you put the note I will mark that one as the solution.


Solution

Jason Herrington wrote:

 Once you put the note I will mark that one as the solution.

Component and Demo are now published at:

https://www.outsystems.com/forge/component-overview/8604/youtubereactive

There's also a live demo available (Try Now button).

Currently published as "In Development" but once a few folks have downloaded and tried it, I'll publish as non-development.


Solution

G. Andrew Duthie wrote:

Jason Herrington wrote:

 Once you put the note I will mark that one as the solution.

Component and Demo are now published at:

https://www.outsystems.com/forge/component-overview/8604/youtubereactive

There's also a live demo available (Try Now button).

Currently published as "In Development" but once a few folks have downloaded and tried it, I'll publish as non-development.


marked as solution - also in mine I turned off controls and turned on auto play.  I may change that later but for my initial solution its what is needed.  Also one suggestion is if the width has a value but height doesn't go ahead and make the aspect ratio hold at 16:9.


Jason Herrington wrote:


marked as solution - also in mine I turned off controls and turned on auto play.  I may change that later but for my initial solution its what is needed.  Also one suggestion is if the width has a value but height doesn't go ahead and make the aspect ratio hold at 16:9.


Would you mind adding those suggestions to the component discussion forum, so I've got them in context with the component so I (or another team member) can be sure to look at them?


G. Andrew Duthie wrote:

Jason Herrington wrote:


marked as solution - also in mine I turned off controls and turned on auto play.  I may change that later but for my initial solution its what is needed.  Also one suggestion is if the width has a value but height doesn't go ahead and make the aspect ratio hold at 16:9.


Would you mind adding those suggestions to the component discussion forum, so I've got them in context with the component so I (or another team member) can be sure to look at them?


Done