Skip to Content
Author's profile photo Chantele Smith

How to embed Youtube videos and Playlists into your Launchpad

With in my organisation we had a requirement to create training content for staff you do not have access to the corporate network.  The way we decided to get around this was to create Unlisted Youtube videos, inside an Unlisted Youtube Playlist.  Then embed this in to our fiori launchpad.

Unlisted v Private Videos

When uploading your videos to Youtube I recommend putting setting them as unlisted if you do not want them to be viewable to the general public.  This is because Unlisted videos are only viewable with the URL.  If you set your videos to Private anyone you want to see them will need a Youtube account.

video unlisted.PNG

Then in order to view multiple videos in a playlist you need to exactly the same and set the playlist to unlisted too.

Playlist unlisted.PNG

Sharing the Playlist

Now you have unlisted videos inside your unlisted playlist you need to get the url your launchpad tile is going to point to.

Note:  A lot of websites including google and youtube do not allow you to view them inside an iFrame, which is essentially what you application frame is. Follow the next bit carefully for how to get around this.

Firstly, make sure all of your videos are set to allow embedding (you’ll see why in a bit.  You don’t have to copy all the settings shown below, just the embedding bit.

Allow Embedding.PNG

Next, you need to get the url for your playlist.  You get this buy going to your playlist and clicking on SHARE, then EMBED. But look closely as you don’t want the entire iframe html script.  You only need the SRC value inside (not including the speech marks).

This is because your fiori app frame is already an iFrame, so you just need to enter the SRC value.  Also by clicking the embed options the videos will play automatically inside your fiori window.

embedsrc.PNG

Setting Up LPD_CUST

Now that you have everything you need to set up your tile.  Go in to your gateway system and transaction LPD_CUST, go in to your launchpad instance and create a New Application of type URL.


Then in the URL section paste the SRC value you collected from Youtube.   If you look carefully you will see this SRC value has the word embed in it.


lpd_cust.PNG


Then in the advanced settings make you have set an application alias value, as this will be used later on.  That’s all you need to set, everything else can be left as it is.


advancedsettings.PNG

Setting up the tile

Now all the Gateway settings are in place it’s time to move on the the launchpad and the tile values.


First we are going to set up a semantic object, this will link to the values you just set in Gateway.  On the left hand side choose your semantic object values, I gave these a name closest to what i was trying to achieve but this is up to you.

Then on the right hand side put in all the details that match to config you just did in your Gateway system.

Then click save.

semanticobj.PNG

Now we can create the tile!

For this I chose a static tile.


Here I gave my tile a Title, Subtitle and an Icon that looked like a play button, but you can set these as you so wish.


On the right hand side you’ll see the parameter match the semantic object values I set earlier, you will need to do this also.


AND THERE YOU HAVE IT!  YOU SHOULD BE ALL READY TO GO!

THANKS FOR READING I HOPE YOU FIND IT USEFUL

videosWhoop.PNG

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Thank you a lot.

      Did you also considered to have the Video direct on the Fiori Launchpad?

      Author's profile photo Chantele Smith
      Chantele Smith
      Blog Post Author

      Hi Simon,

      I was something i thought about, but we have a lot users who are new to this type of tech/ way of working.  So i didn't want the launchpad to have too many different elements all at once.

      Having the videos embedded via tile seemed like a good meeting point, as users were just getting comfortable with tiles.

      However, we are now looking at new and different things to do with the launchpad.

      Thanks

      Chantele

      Author's profile photo Shrinidhi Kulkarni
      Shrinidhi Kulkarni

      Hi Chantele Smith,

          

      how you loading the youTube similarly i am loading the map, on click of map there will be a event  raised, can i able get that event ? how do i get that event ?

      Thanks,

      Shrinidhi K

      Author's profile photo Chantele Smith
      Chantele Smith
      Blog Post Author

      Hi


      Shrinidhi, i hadn't considered loading a map.


      To be honest in order to implement a map in the way you are describing, i would consider creating an app, that is wholly for the purpose of displaying the map, then you have more control of over the controls and events you place on the map.


      There are some great tools available to incorporate maps in to ui5, like the one below

      http://jasper07.secondphase.com.au/openui5-googlemaps/

      Author's profile photo Shrinidhi Kulkarni
      Shrinidhi Kulkarni

      Hi ,

           thanks for your time ,It nice you replied, I checked that link but my scenario is different I need to load an java project which works on map, here I succeed to run the project by URL,like how you call you-tube,but here i am failing to get the events raised by it..

      Author's profile photo Abu Sandeep
      Abu Sandeep

      DearĀ Chantele Smith,

       

      Thanks a lot for this blog, informative. I followed this and it is working, but shows error on tile and it did not work as expected. It is opening the tile to the youtube video, not showing in the same tab.

       

      Regards,

      Abu Sandeep

      Author's profile photo Former Member
      Former Member

      So it is a useful thing here. proxy youtube

      Author's profile photo Kiran Israni
      Kiran Israni

      HiĀ Chantele

       

      Nice blog.

      I have a short question, Is there any way, to play video automatically on click on a tile?

      Also,full screen feature is not available.

      Could you please suggest.

       

      Thanks and Regards

      Kiran