Adding a video to a Portal page is a quick way to share valuable information across your company.
I will walk you through a simple and basic way to add a YouTube video or a ServiceNow stored video on a portal page. This post will provide you with the foundation to add a video to the Service Portal.
Here are some things to keep in mind - (Here is the documentation)
- Not all Video formats can be added to the HTML field; here is the documentation for what video files are compatible.
- The following file formats are supported in the base system.
-
- MPEG-4 video .mp4
- WebM Video .webm
- The larger the file size, the longer it takes to download before the video starts. To reduce file size, you can reduce the bitrate, but doing so reduces the quality of the video.
- Internet Explorer and Safari have difficulty streaming videos uploaded to the database. Attach a file rather than embedding if you intend to use one of these browsers or an unsupported file type. For more information on attaching files, see Add and manage attachments.
I will walk you through the ServiceNow stored video 1st.
You will need to add a video to the Video table (db_video). To add a video to the Video table, you need to have the image_admin role or admin role.
You can add a video directly to the table.
You will need the file name of the video you saved later in the steps.
Now we will create a new Portal Widget -
Go to Service Portal --> Widget and click on the "New" button.
In the "Body HTML template" section is where you are going to add the video code. I have provided the code I used in this example below. The src attribute with the video element knows that the video file name comes from the db_video table. Save it and open the portal page you want to add it to. Find the widget that you just created and "drag and drop" to where you want the video to appear on the portal page.
You will need to change "test.mp4" to the file name you uploaded.
<p><video src="test.mp4" width="560" height="315" controls="controls"></video></p>
If you are not conformable with writing code, you can go to a Knowledge article. In the KA article body, there is an "add video" icon. Click it. Add the video you added to the Video table. Here is also where you can adjust the height and width. Once you added the video, click on the source icon. ServiceNow will generate the HTML code for you. You can copy and paste that code in the "Body HTML Template" Section in the widget, and it will work just fine.
For further instruction on How to add a video to a Knowledge article, Or if you want to add a video to a Knowledge article, go here.
Add a YouTube video-.
For this example, I am using this YouTube video - https://www.youtube.com/watch?v=JCOURZ-yx4E. You will need the Embed Video code that YouTube provides. It's found in the share button.
<iframe width="560" height="315" src="https://www.youtube.com/embed/JCOURZ-yx4E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>However, that code that YouTube provides will not work as-is. You will need to add this additional code for it to work in SN-
referrerpolicy="strict-origin"Here are both codes combined -
<iframe referrerpolicy="strict-origin" width="560" height="315" src="https://www.youtube.com/embed/JCOURZ-yx4E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
With that combined code in hand, go back to the Portal widget you created earlier or create a new one. For this example, I am using the same widget I created earlier. In the same section "Body HTML Template" section, add the code and save -
Here is what it looks like on the Portal -
I tested this in the New York, Orlando, and Paris release.
6 Comments
