Embed Youtube Player in Reactive Web App

Hello,

I've been trying to embed a youtube video in my web reactive app but without success. I've tried with the "OutPower RWA Escape Content app" and with some other ways that usually worked in traditional web but can't get it done. Also didn't find anything related (to react web apps) in the forum. Does someone have any tips about how to do it or what could be the problem?

Thank you,

Solution

Hi Rafel,

Check this out:  EmbedYTBVideo Demo App Screen

Implementation Steps:

1) Use the RWA HTML Element

2) Define the HTML Element tag property as iframe as mentioned below

PFA - include the .oml Solution file

Note: I think, you won't be able to play the youtube video using the video UI widget by passing/referring the respective Youtube video URL, it won't work.


Hope this helps you!


Regards,

Benjith Sam

Solution

Benjith Sam wrote:

Hi Rafel,

Check this out:  EmbedYTBVideo Demo App Screen

Implementation Steps:

1) Use the RWA HTML Element

2) Define the HTML Element tag property as iframe as mentioned below

PFA - include the .oml Solution file

Note: I think, you won't be able to play the youtube video using the video UI widget by passing/referring the respective Youtube video URL, it won't work.


Hope this helps you!


Regards,

Benjith Sam

Thank you Benjith. I tried a lot of things and the solution was simply change the html content tag... didn't know it would resolve the problem.
And yeah, the UI widget do not work with Youtube links... i've tried to do it with a video from an external drive but i'm having some issues connecting the drive to the reactive app, hope to have some answer and test it again.

Thank you once again.


You're welcome, Rafel :)

Sorry, I never used the GDrive Connector.. will give it a try :)

Glad I could be of help!


Regards,

Benjith Sam

Benjith Sam wrote:

You're welcome, Rafel :)

Sorry, I never used the GDrive Connector.. will give it a try :)

Glad I could be of help!


Regards,

Benjith Sam

Benjith, with the solution you put forth above can you fire an action when the video completes?


Hi Jason,

See this sample app (Implemented the required functionality in the second video - Video UI Widget)

Add a JavaScript node/element within the screen OnReady event handler screen action flow as shown below (use the below mentioned script)

Code Snippet

var videoElement = document.getElementById($parameters.VideoElementId).querySelectorAll("video")[0];

videoElement.addEventListener("ended", function() {
    $actions.ShowMsg();
});


Let me know if you need the sample .oml file

Hope this helps!


Regards,

Benjith Sam

Benjith Sam wrote:

Hi Jason,

See this sample app (Implemented the required functionality in the second video - Video UI Widget)

Add a JavaScript node/element within the screen OnReady event handler screen action flow as shown below (use the below mentioned script)

Code Snippet

var videoElement = document.getElementById($parameters.VideoElementId).querySelectorAll("video")[0];

videoElement.addEventListener("ended", function() {
    $actions.ShowMsg();
});


Let me know if you need the sample .oml file

Hope this helps!


Regards,

Benjith Sam

Benjith, I am assuming this is using the react built in video player.  The issue is I need to play youtube video's.  Is there a way to do this where it will accept youtube addresses and have the same javascript listener?