Feature: Video Embedding

Are you in need of embedding videos in your app? Receiving an error? Give the following a try:

What is video embedding?
Video embedding allows you to take a link from an external source, such as youtube, and embed it into your data to view on your app. This is different from sites like youtube and Vimeo that allow you to upload your video content directly to their server. Currently, AppSheet only supports the embedding of videos.

Where do I set up video embedding?
The ability to embed your videos in your app is done by ensuring your data is correctly set up to accommodate and display videos with the right column types. Weโ€™ll walk you through the process of how to do this below.

  1. To find the portion of your data where youโ€™ll need to make adjustments for video editing, open your app editor by selecting the app youโ€™d like to work on.
  2. The navigation bar on the left side displays a tab titled โ€œData." Click this tab.
  3. Once youโ€™re in the data tab youโ€™ll find a navigation bar along the top of your editor. The second tab is the โ€œColumnsโ€ section. Click this tab.
  4. Once youโ€™re in this tab youโ€™ll see a list of tables. Select the table you would like to have associated with video embedding.
  5. From here, select the data column that you would like to contain the embedded video links and confirm that the column type is set to videos.

Important notes

  • To see video embedding in action, hereโ€™s a sample app to review.
  • Hereโ€™s a quick additional read if youโ€™d like a bit more info.
  • If you donโ€™t already have a column reserved for your video in your original data source, youโ€™ll need to add a new column first and then adjust its column type to the correct field in your app editor. Adding a new column may ask you to also regenerate your data (learn more about regenerating data which is absolutely ok.
  • Setting up the ability to embed videos is similar to working with photos in your data. You can learn a bit more about the structuring your data for the photo feature here.


Try adding this feature to your app now and let us know how video embedding works for you.

Happy app building!

3 57 11K
57 REPLIES 57

Two thoughts:

  1. First and foremost, the screaming goats video is hilarious!
  2. But seriously, this works very well with YouTube. I remember having a lot more difficultly getting mp4 videos that are not on YouTube (e.g. hosted on my own server) to play properly. Has anything changed in that regard? If thereโ€™s an example app that plays mp4 files hosted on the web, and if the app responds dynamically to the size of each individual video (as is the case with YouTube), Iโ€™d like to see it. If not, it would be great if that capability could be added some day.

I did that by using the Column Type โ€œFileโ€. You can upload mp4 files and watch them.
But you are right, there are some difficulties.
Like this one:

Interesting. I hadnโ€™t thought of trying to use the FILE type. Iโ€™ll try to experiment with it later.

Is there any way to save the video somewhere else besides YouTube, to get an embed code?

Iโ€™ve experimented with mp4 files hosted on a independent server, but I found that the videos were not resized properly. Iโ€™m not sure if that situation has changed recently.

By the way, if you are referring to capturing and saving a video, in the same way that pictures can by taken and then brought into an app, that is not yet possible, as far as I know.

tcanelli
Participant V

This doesnโ€™t really advise how to embed mp4 files from Google Drive or another source other than YouTube. YouTube has been working but because of the autoplay option I need another solution. I would like to embed the mp4 file directly from Google Drive. I can hyperlink to it but canโ€™t get the embed to work. The iframe displays but nothing else.

As I recall, I got an mp4 file to play in the app by making it tiny, but thatโ€™s problematic and too much trouble. After that I gave up.

Thanks Kirk.

I did figure out you can add ?rel=0 to the end of the youtube embed link to stop random recommended videos - but I still donโ€™t like it.

My only other option is to give the hyperlink to the mp4 on google drive.

I hope the ability to handle web or Google drive hosted mp4s comes to AppSheet eventually. Actually, Iโ€™m waiting for a similar capability for mp3 audio files as well.

@Kirk_Masden and @tcanelli have you both had a chance to posted these requests in the Feature Request category?

I think I posted something about these topics (mp3 and mp4 support) in the past but it may be time to post again. Thanks!

Those of us interested in adding moving images to our apps should also be aware of the usage of gifs that @tsuji_koichi has been exploring:

Iโ€™m loving the Youtube links and could be very useful.
Just one thing, the format of the link has to be changed from its normal structure:

https:// youtu.be/p3UONyvFCjE

to

https:// youtube.com/embed/p3UONyvFCjE
(spaces added so just text shows)

Which can be quite difficult if capturing a link from a mobile device, could there be an expression to extract any string past the last / and concatenate it with โ€˜embedโ€™

?

Cheers

I posted earlier about @tsuji_koichiโ€™s use of animated gifs in AppSheet:

Unfortunately, I havenโ€™t been able to figure out how to emulate what heโ€™s done yet. I wonder if anyone has made a sample app to illustrate how to take advantage of gif animation in AppSheet.

It seems to me that animated gifโ€™s have several advantages for the AppSheet platform and so may deserve more official AppSheet support. One advantage is that a short video illustration in the form of a gif doesnโ€™t require any controls (no need for a progress bar, start, stop, etc.). Another is that, if animated gifs could work in the โ€œImageโ€ file type, one could merely upload a gif and then it would work โ€“ just as gifs work automatically in most browsers.

I assume that using animated gifs in AppSheet isnโ€™t that simple yet but please correct me if Iโ€™m wrong.

I know this is not perfectly fancy way to show gif file on Appsheet app, but there is a way to achieve this. Again, I know this is not ideal way for you as it takes several steps and process to follow to save gif file and show the same on the Appsheet app. Other community member may have far better way to achieve the same, but please see the quick short movie here.

In a nutshell, i did like this.

  1. Create physical column to store text for Google Drive file IDs. Column name here in this sample case is named as [Google Drive Gif file ID]
  2. Create the VC using formula like โ€œhttps://drive.google.com/uc?id=โ€&[Google Drive Gif file ID]
  3. Get the gif file whatever you want. Giphy is good and easy web app to generate gif out of your movie file or down load the work they made. For this demo, I download one gif.file from this site and saved temporarily on my drive.
  4. For demonstration purpose, I selected Google Drive as storage for gif file as other appsheet creator should use the same for the main storage.
  5. once the gif is saved, then get the sharable link where we can find ID for the file. Get the id from the url.
  6. Go back to appsheet app and paste the ID to physical column

Now we will see the gif file which is actually animated rather than static shot.

Try it out.

I reckon there are other better way, but this should be one of the option to get the Gif file to show correctly as originally designed.

When we create the image type column file, we still can save gif file, but it only display thumbnail and static image based on the current default set of the appsheet. I m not sure about the technical reason about it, but to get the gif file which is saved in Google drive, then we need to get to access with the particular URL, with parameter of โ€œ/ucโ€
You see the full path generator, I would say, in the virtual column is ended with /uc?id="&[Google Drive Gif file ID]

I invite some thought from Appsheet team if it is possible to introduce the URL where gif works as animated rather than simple.

In the appsheet or any other app building platform, it is not a native feature to convert movie file to gif. We need to rely on any other solution like Giphy. This step is bit time consuming but we are not able to avoid this step. However, once gif is generated, then we still have a path to get them working on Appsheet app, this is one of the possible example, Krik.

@Fabian is one of the specialist about this topic, so let me add him on.

Actually, I learn trick to add /uc as a part of parameter to URL from him and his previous post.

I finally got it to work. I wanted to put the gif on my own server but, for some reason, I couldnโ€™t get that to work. However, when I uploaded a gif I had made to my Google drive account and then made it public, I got the following shareable URL:

https://drive.google.com/file/d/1Zm67g8yUdgP4szOjou_psXXAIxNQYlVf/view?usp=sharing

That wouldnโ€™t work in a virtual image column . . . nor would

https://drive.google.com/file/d/1Zm67g8yUdgP4szOjou_psXXAIxNQYlVf/

However, when I substituted โ€œuc?id=โ€ for โ€œfile/d/โ€ as follows, it worked:

https://drive.google.com/uc?id=1Zm67g8yUdgP4szOjou_psXXAIxNQYlVf

My virtual โ€œimageโ€ column moved in a manner befitting a Hogwarts moving portrait.

Why THIS works and other things I tried didnโ€™t, I donโ€™t understand. As Alice once said, โ€œCuriouser and curiouser!โ€

Additional notes.

When we save MP4, MP3 file to Google drive and get the ID for the file, actually it is going to work. Movie is shown with Appsheet view, and audio is the same.

Past the IDs to the physical column, then set the virtual column type to MOVIE with same app formula.

Without opening external browser tab, it will display saved mp4, mp3 files.

Try when you have a chance.

โ€“

If you want to let your app user to save those mp3, mp4 and gif files as they wish. This may not be an option with you, as they need to visit Google Drive, save files, get the url, and get ID, Then return to Appsheet past ID. Probably this is too much for app end users. But if you are fine with Appsheet app creator like you are able to save those file within a app, I think this is one of the workable option until Appsheet natively adopt new feature to save mp3, mp4 etc.

Hope this might be of your interest.

In my case, I want to use animated gifs, etc. as a creator and my users donโ€™t need to do this. So, this technique is VERY valuable to me. I hope, though, that AppSheet will improve the support for animate gifs so that they can be store in other ways.

Back to gif file, just for your guidance, it should work if you set the data type to thumbnail instead of image.

My understanding is the problem is here.
When we save the file through appsheet app, then I will be saved to the cloud service, most of the case, user are using Google, so it is going to be saved to Google Drive at the end. After the file is saved, we access to those files through Appsheet server, rather than we (client side, browser) directly access to the files. Hence, we are not able to view the movie, mp3, gif as it is filtered by the appsheet server.

So we probably need to ask Appsheet team to get some mechanism to generate the less restricted file URLs through the Appsheet expression. But again, this sounds a bit tricky as well, as user is not necessarily using Google drive to store the object. Maybe One Drive, Dropbox etc. Each cloud storage service should have different set and requirement. For instance, I m not sure how to construct the URLs like this case of Google Drive. I quickly tested. Saved gif and mp4 to One Drive and Dropbox, and get the default URLs which each service generate. And past to appsheet app. Both did not work.

Even though we are able to get the access full path URLs out of the app, still it is going to be difficultโ€ฆ from my prospective, so we need to think about a bit hacky way to achieve.

Alternative Options.

Use the bucket services, like Amazon S3, Firebase/Firestore. I actually posted feature request to integrate Firebase/Firestore, as it is super easy to handle. Did the same test. Saved mp3, mp4, git to both bucket service manually and the get the sharable URL. Paste to Appsheet . Amazon S3. Did not work, but files is not accessible from Appsheet by the URL.Probably we need to set the authentication etv, but i m not sure and do not have time to investigate.
Secondly, Firebase/Firestore. Get the URLs and paste to Appsheet. Actually it works perfectly. Movies are displayed and gif, mp3 as well.

So for me, Integration with Firebase/Firestore is ton the top side of my wish list to have as new feature. Additionally, we could capture the URL when we set the Firestore as data store, it is just perfect. Actually we can save any type of files in a large scale, and most importantly Firebase is basically free.

I talked too much, haha. Anyway, I m happy to hear you find this trick useful. Keep in touch. (^.^)/

I welcome comment from Appsheet team, if they see this thread.

I couldnโ€™t get the thumbnail column type to show a gif on my server correctly. So far, Iโ€™ve only gotten the gif to move with the kind of โ€œhttps://drive.google.com/uc?id=โ€ address that you recommended.

@JCadence, I know that @praveen and others at AppSheet are already aware of @tsuji_koichiโ€™s interesting and important comments. I really hope that someone at AppSheet will have the time to follow up on this. Thanks in advance!

Thank you Kirk, and interesting to hear how the different device and OS works. Thats why story is NOT simple! all the time.

Have you ever used Google Firebase before?

If not, please try it out.

It is free. I remember you can access to your Firebase account with your Google Account.
Then follow the guide, generate test project. Then under the test project, use Firestore.
From browser, you can upload file. Test and upload all the different type you have interest. Then get the download URL, and paste to your Appsheet App and see how it will work.
My devices are all Appleโ€ฆ At least, it works, but curious to see how Android will behave on this set up.

Iโ€™ve confirmed that the animated gif works perfectly on both Android and iOS devices. In regard to mp3s, it works very well, with a little mp3 player on my browser and on my Android phone but didnโ€™t work the same way on an iOS phone. Instead, the mp3 played in Safari, which is the same thing that happens when I have the mp3 on my own server.

I am trying to embed a video similar to above
Had the original video as

https://drive.google.com/file/d/1Xbco-k_er52SQbxv54ACf1fxhL0QNSq/view?usp=sharing

I tried to keep just the fileid 1Xbco-k_er52SQbxv54ACf1fxhL0QNSq
then i tried to keep the https://drive.google.com/uc?id=1Xbco-k_er52SQbxv54ACf1fxhL0QNSq

I set the Column type as Video in appsheet.

but yet it does not work in appsheet, has a video icon but nothing plays.

I see your comment it works please let me know. I dont have the actual mp4 link or cannot get.

note: Sorry the link may not work as its not shared public,

At least, the files need to be published among others.

If you dont want to publish your mp4 file then try following step.

  1. Add your folder where you save mp4 file as table to appsheet.
  2. you will see the tables generated out of folder.
  3. you will find [_Path] column.
  4. Create VC, set the data type to show, and category to Video. Then for both App Formula as well as Context field, you pass simple expression of TEXT([_Path])

This could be best and easiest approach to achieve your goal.

Thanks @tsuji_koichi!

By the way, @JCadence, I tried using the video column type to play a little mp4 from my server and, as before, it didnโ€™t work too well. On an iOS device it played but the initial image did not fit on the screen. On an Android device of mine, it didnโ€™t play at all. So, support for mp4 files is still an issue. I did post about wanting mp3 support, but I havenโ€™t reposted about mp4 support yet:

Thanks for your feedback @Kirk_Masden. Weโ€™ll take it into consideration for future work.

@Kirk_Masden

Out of curiosity, I quickly tested a few different storage services (generally all free), including bucket service.

AWS S3 is one of popular one. Appsheet is actually integrating this, but Appsheet creator needs to have Business Subscription to use this functionality. To be honest with you, I was not feeling much of benefit from this integration with S3.

One reason is little tricky and complicated to set up S3, compare with Firebase/Firestore.

Secondly, the URL AWS S3 returns once the files are saved to the storage is restricted. It should be good from security prospective, but meaning, we need to work around bunch of stuffs to clear the firewall etc.

All in all, S3 and bucket is great services, but not actually and practically using on my app before, probably will not be for the future as well.

To the contrast, Firebase/Firestore is easy to handle to setup with far better UI/UX on the base platform. So I really want to have integration into Firebase/Firestore as bucket service. They are so called NOSQL, so not suitable as data source to the AppSheet App, but for storage service, like storing file and image, it should bring more benefit. Especially loading image and reading files are far more faster rather than storing in Google Drive or other storage services. If the app heavily save the images, it will reduce users frustration to wait for sync to upload bunch of images.

Anyway, what I quickly tested it

Save the files manually to several cloud warehouse, then get the sharing, public url.

And paste url as text/string to AppSheet app column whose data type is simple text. Then generate this column in App formula in Virtual column then see if AppSheet view display images and files.

Saved the gif, mp3, mp4 files manually to see the difference of file type will act

The cloud service I tested are

  1. Google Firebase/Firestore

  2. AWS S3

  3. Google

4)One Drive

5)Dropbox

To make long story short, only Firebase/Firestore returned all the different files correctly without twisting the strings adding parameter or change parameter, but URL as it is did work.

I hope this factual result may bring some support for AppSheet dev team investigation and consideration.

FYG, the device I tested is IOS and MaC, not testing ms and android .

Embedding Youtube Videos works fine, but adding a Vimeo Url does not work. Is there a special way of formatting the link. like in youtube using the link for embedding, and not just the url of the video? like down below?
https://www.youtube.com/embed/โ€ฆ
How must the link for a Vimeo video look like?

Embedding Youtube Videos works fine, but adding a Vimeo Url does not work. Is there a special way of formatting the link. like in youtube using the link for embedding, and not just the url of the video? like down below?
https://www.youtube.com/embed/โ€ฆ
How must the link for a Vimeo video look like?

were you able to embed Vimeo videos?

Hi @Constanze_Kobing! Welcome to the community.

I hope someone will prove me wrong, but I suspect that AppSheet doesnโ€™t work with Vimeo yet.

Hi. I have the same question. I can not find a way to embed Vimeo (or any other mp4). Only Youtube seems to work.

Hi, I found a way to play vimeo videos in my app. It worked for me the following way.
I have a PRO Subscription for Vimeo and use a feature that is not available with the FREE version.

Go to the Video you want to embed.
Go to โ€œDistributionโ€ Section (not to the โ€œembedโ€ section)
Scroll down until you find โ€œVideo File Linksโ€
It offers you links for different video resolutions
Copy the link (Button available)
Paste into spreadsheet

I refreshed my app and it showed up and plays the video.

Most exciting about the option for me is that the Player looks better than Youtube.
I tried youtube but was not satisfied. Youtube looked smaller and didnโ€™t fill up my phone screen from side to side, but Vimeo does.

Happy app building

Awesome. Can you share screenshots or gif of the result? Interesting to see how it looks when you open the record and maximize the video size.

I donโ€™t know what prevents the embed Youtube video to have the full screen option available on Appsheet.

I tried this today and it does work, but it doesnโ€™t solve the issue of restricting video sharing as it gives you a download option on the video. it uses the video html tag to play it.
Looks nice though, here is a detailed view with a vimeo video on top and a youtube on the bottom.
The picture in picture feature is pretty good too, if you were embedding an instructional video in a long form or something like that.

Awesome, I wish it was the same layout for YouTube.

Hi! Quick question โ€ฆ does the video play automatically without having to press the play button?

Top Labels in this Space