Embedding TikTok, YouTube and Instagram Videos in Caspio Apps

Aug 03, 2022 • 2 minutes to read

Do you need to embed videos from video-sharing services to your Caspio apps for training purposes, an internal video library or other use cases? In this article, you will learn how to embed TikTok, YouTube and Instagram videos into Caspio apps using the video’s direct URL. Caspio automatically detects the correct player to use to render these videos.

Steps:

Create a new table or use an existing table for your videos.
Add the following fields to the table:
- Provider as Text (255)
- Video_URL as Text (64000)

We will use these two fields to store the providers (i.e., YouTube, TikTok, Instagram) and the video URLs (i.e., https://www.youtube.com/watch?v=xxxxxxxxxx)

Note: You can use a different name for these fields; however, you will need to update the names in the custom codes in the later steps.

Add any other fields such as video title or category if needed.
Create a tabular report DataPage with the table above to display the videos. In the DataPage Elements, add the following elements or fields:
1. Insert a Calculated Field with the following code to get the unique ID of each video.
2. The calculated field with a unique video ID will be displayed in the report. You can insert the code below in the Header section to hide it. Replace N with the calculated field column index number.
3. Insert an HTML Block and disable the HTML editor.
4. Add the code below to create a hyperlink to the video page. Replace the VIDEO_PAGE_URL with the actual page URL where you will deploy the HTML DataPage created in Step 5 below. If you used a different name for the Provider field in step 2 above, then update it in the link as well.
5. Add other fields if you want to display them in the report.
6. Finish and save the DataPage.
Create an HTML DataPage to render and play the videos.
In HTML DataPage, disable the HTML Editor and paste the code below: Replace the VIDEOS_LIST_URL with the actual page URL where you deployed the tabular report DataPage in step 4 above.
Finish and save the DataPage.
Deploy both DataPages to your site.

code1

CASE
WHEN
[@field:URL_FIELDNAME] LIKE '%instagram%'
THEN
Replace((RIGHT([@field:URL_FIELDNAME], LEN([@field:URL_FIELDNAME]) - PATINDEX('%p/%', [@field:URL_FIELDNAME]))), '/', '')
WHEN [@field:URL_FIELDNAME] LIKE '%youtube%'
THEN
RIGHT([@field:URL_FIELDNAME], LEN([@field:URL_FIELDNAME]) - PATINDEX('%=%', [@field:URL_FIELDNAME]))
WHEN [@field:URL_FIELDNAME] LIKE '%tiktok%'
THEN
Replace((RIGHT([@field:URL_FIELDNAME], LEN([@field:URL_FIELDNAME]) - PATINDEX('%/video/%', [@field:URL_FIELDNAME]))), 'video/', '')
END

code2

<style>
form[action*=’[@cbAppKey]’] tr.cbResultSetDataRow td:nth-child(N),
form[action*=’[@cbAppKey]’] tr.cbResultSetTableHeader th:nth-child(N) 
{
display:none !important;
}
</style>

code3

<a href="VIDEO_PAGE_URL?social=[@field:Provider]&ID=[@calcfield:1]">Play</a>

code4

<a href="VIDEOS_LIST_URL">Back to the videos list</a></br></br>
<pre id="myVideo"></pre>

<style>
iframe[id="yt"]{
	width: 70% !important;
	height: 700px !important;
}
</style>

<script>
document.addEventListener('DataPageReady', function (event) {
var social_converted = '[@social]';

if (social_converted.toUpperCase() === 'INSTAGRAM') {
document.getElementById("myVideo").innerHTML= '<center><iframe id="instagram-embed-0" class="instagram-media instagram-media-rendered" style="background: white; max-width: 658px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid #dbdbdb; box-shadow: none; display: block; margin: 0px 0px 12px; min-width: 326px; padding: 0px;" src="https://www.instagram.com/p/' + '[@ID]' + '/embed?utm_source=ig_embedembed/captioned/" scrolling="no" data-instgrm-payload-id="instagram-media-payload-0" height="710" frameborder="0"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe></center>';
} 
else if (social_converted.toUpperCase() === 'YOUTUBE') {
document.getElementById("myVideo").innerHTML= '<center><iframe id="yt" src="https://www.youtube.com/embed/' + '[@ID]'+ '" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>';
} 
else if (social_converted.toUpperCase() === 'TIKTOK') {
document.getElementById("myVideo").innerHTML= '<center><div style="max-width: 56vh;"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 177.7778%; padding-top: 120px;"><iframe src="https://www.tiktok.com/embed/' + '[@ID]' + '" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="encrypted-media;"></iframe></div></div></center>';
} 
});
</script>