# PLYR component + Amazon S3 Youtube Video

**URL:** <https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494>\
**Category:** Resources & Tutorials\
**Created:** [November 29, 2020, 3:39pm UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494 "2020-11-29T15:39:02Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![theadaloguy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/theadaloguy/32/8023_2.png) [@theadaloguy](https://forum.adalo.com/u/theadaloguy)\
**Post date:** [November 29, 2020, 3:39pm UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/1 "2020-11-29T15:39:02Z")

</div>

Hi all! I’ve made a video on configuring Amazon S3 buckets so the MP4 file works with PLYR Video. Enjoy.

[![](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/c/f/cf8c094b2235a46532409cda2697451ff8186d5f.jpeg "Adalo PLYR video component + Amazon S3") ](https://www.youtube.com/watch?v=YQLdaBt5iqM)

Note: If someone with more experience with security settings can check the video please let me know if I’ve configured it correctly as I don’t want to lead anyone astray!

---

<div class="post-metadata">

**Author:** ![lottemint](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/lottemint/32/3396_2.png) [@lottemint](https://forum.adalo.com/u/lottemint)\
**Post date:** [January 26, 2021, 10:00pm UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/2 "2021-01-26T22:00:19Z")

</div>

Hello @theadaloguy!

Thanks for preparing this lovely tutorial for our component!

BTW, I attached the code source of the component:

> [@HLS Video Streaming](https://forum.adalo.com/t/hls-video-streaming/6041/5):
>
> Hey, Thanks for getting in touch with us, and sorry for the late reply! Currently, the Plyr component doesn’t support HLS. We want to add that possibility, but we have no ETA on this one since we’re busy at the moment. Please feel free to fork our component to adjust it to your needs if you have code experience: Example sources with the HLS: https://codepen.io/noikiy/pen/dVYJER https://codepen.io/pen?template=oyLKQb Note: For mobile devices, the Plyr component uses the WebView feature to…

File:  
[//s3.amazonaws.com/appforest\_uf/f1611698399080x447157099374699800/plyr-video.zip](https://s3.amazonaws.com/appforest_uf/f1611698399080x447157099374699800/plyr-video.zip)

---

<div class="post-metadata">

**Author:** ![oivaizmir](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/oivaizmir/32/7619_2.png) [@oivaizmir](https://forum.adalo.com/u/oivaizmir)\
**Post date:** [April 26, 2021, 8:56pm UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/4 "2021-04-26T20:56:29Z")

</div>

Thank you so much for making this video, such a great resource for the entire community.

---

<div class="post-metadata">

**Author:** ![NoCodeNinja](https://avatars.discourse-cdn.com/v4/letter/n/cab0a1/32.png) [@NoCodeNinja](https://forum.adalo.com/u/NoCodeNinja)\
**Post date:** [May 2, 2021, 3:11pm UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/5 "2021-05-02T15:11:02Z")

</div>

Comment, Question, and an Issue/bug:

1. Thanks for making this PLYR video component. It is pretty awesome.
2. Question: Will having users upload video to my Adalo DB make my app slow? Is that the reason for the Amazon Bucket? To pull from a different CDN instead of pulling from the app?
3. I think there is a bug/issue I am encountering. I am wanting the video to show the thumbnail picture of the user’s profile pic, instead of the first frame of the video. The option for this exists in the player… it’s just not working.

---

<div class="post-metadata">

**Author:** ![theadaloguy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/theadaloguy/32/8023_2.png) [@theadaloguy](https://forum.adalo.com/u/theadaloguy)\
**Post date:** [May 2, 2021, 3:15pm UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/6 "2021-05-02T15:15:32Z")

</div>

1. The main reason I used the Amazon bucket was limited file upload size in Adalo. I don’t know if it would slow down the app, maybe not, but it would also put you towards your database size limit.

2. I didn’t try to change the thumbnails but maybe @lottemint can help with that.

---

<div class="post-metadata">

**Author:** ![nvrjulian](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/nvrjulian/32/23002_2.png) [@nvrjulian](https://forum.adalo.com/u/nvrjulian)\
**Post date:** [May 12, 2021, 7:52pm UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/7 "2021-05-12T19:52:22Z")

</div>

Hi everyone!

I’m playing around with the component here, and just to be sure… the plyr only works with aws server?  
I have tried some videos uploaded to Dropbox with .mp4 extension but with no success yet.

And the file uploader from Adalo it’s not working with videos. Even with an Admin screen with form file picker to upload the videos.

Thanks for your help!

---

<div class="post-metadata">

**Author:** ![theadaloguy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/theadaloguy/32/8023_2.png) [@theadaloguy](https://forum.adalo.com/u/theadaloguy)\
**Post date:** [May 12, 2021, 11:10pm UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/8 "2021-05-12T23:10:25Z")

</div>

Other servers work if you can configure them properly.

However I’m not sure it can be done with Dropbox or Google drive, I don’t think they have the advanced settings needed.

---

<div class="post-metadata">

**Author:** ![nvrjulian](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/nvrjulian/32/23002_2.png) [@nvrjulian](https://forum.adalo.com/u/nvrjulian)\
**Post date:** [May 13, 2021, 4:12pm UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/9 "2021-05-13T16:12:20Z")

</div>

I found a solution for this!  
If anyone bumps with this problem with CORS permissions, some cloud storage services have a specific URL to allow public permissions.

In the case of Dropbox you can use this: [https://dl.dropboxusercontent.com/{your-file}](https://dl.dropboxusercontent.com/%7Byour-file%7D)  
And then call the url with magic text to the plyr comp.

Maybe not the best option but works for now.  
Hope this helps someone!

---

<div class="post-metadata">

**Author:** ![abou](https://avatars.discourse-cdn.com/v4/letter/a/5daacb/32.png) [@abou](https://forum.adalo.com/u/abou)\
**Post date:** [June 7, 2021, 5:42pm UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/10 "2021-06-07T17:42:28Z")

</div>

Hi all,

I need your help on PLYR, I finished to build my app but I am facing issue to play video when I install app on my phone. I am using AWS for large file as “theadaloguy” explained in his video. All works online or preview but not with APK (publish app). Did you have the same issue ? I used domain on the screenshot.

![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/2/2fe6919efb47cee45ab9958eef65b396f83a736b.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/0/03df1ff62ee033e5009b71361383fe55873defb4.png)

Thank you

Regards

---

<div class="post-metadata">

**Author:** ![saltbeef](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/saltbeef/32/13782_2.png) [@saltbeef](https://forum.adalo.com/u/saltbeef)\
**Post date:** [December 1, 2021, 8:51am UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/11 "2021-12-01T08:51:05Z")

</div>

Hello @theadaloguy  
Thank you for your guide.  
I was able to reflect my video using the method of your youtube video. However, when I press the play button, I hear the audio, but no video and it blacks out.  
Can you tell me what is causing this?

 ![スクリーンショット 2021-12-01 17.38.25](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/3/30fac4f48e380240242f77e802543b2a50c0d84c.png)

---

<div class="post-metadata">

**Author:** ![theadaloguy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/theadaloguy/32/8023_2.png) [@theadaloguy](https://forum.adalo.com/u/theadaloguy)\
**Post date:** [December 1, 2021, 9:09am UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/12 "2021-12-01T09:09:44Z")

</div>

That is very strange. If you copy the URL of the video, and play it in your browser, is it the same? What is the file format?

---

<div class="post-metadata">

**Author:** ![saltbeef](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/saltbeef/32/13782_2.png) [@saltbeef](https://forum.adalo.com/u/saltbeef)\
**Post date:** [December 1, 2021, 9:59am UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/13 "2021-12-01T09:59:30Z")

</div>

Yes. The file format is mp4 and mov.  
When I tried open URL by Safari, I could see my movie.  
But when I opened by Chrome, I couldn’t see my movie(only sound).  
I’d like to open Chrome.  
What do you think about the cause?

---

<div class="post-metadata">

**Author:** ![theadaloguy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/theadaloguy/32/8023_2.png) [@theadaloguy](https://forum.adalo.com/u/theadaloguy)\
**Post date:** [December 1, 2021, 10:36am UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/14 "2021-12-01T10:36:32Z")

</div>

I think .mov might have issues and mp4 will be fine. Can you confirm that’s the case?

---

<div class="post-metadata">

**Author:** ![saltbeef](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/saltbeef/32/13782_2.png) [@saltbeef](https://forum.adalo.com/u/saltbeef)\
**Post date:** [December 2, 2021, 1:38am UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/15 "2021-12-02T01:38:52Z")

</div>

I couldn’t open mp4 file on Chrome, too.

---

<div class="post-metadata">

**Author:** ![jannava](https://avatars.discourse-cdn.com/v4/letter/j/ba9def/32.png) [@jannava](https://forum.adalo.com/u/jannava)\
**Post date:** [March 22, 2022, 12:01pm UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/17 "2022-03-22T12:01:39Z")

</div>

Sorry, didn’t see the solution in the comments on youtube:  
Somehow when copy pasting something goes wrong even when it looks correct. I copied it to [JSON Formatter & Validator](https://jsonformatter.curiousconcept.com/#) and then manually changed the “”, processed it via that site. Then copied and pasted into AWS s3 and now it works (bucket policy, cors also added and playing the video with plyr).

---

<div class="post-metadata">

**Author:** ![theadaloguy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/theadaloguy/32/8023_2.png) [@theadaloguy](https://forum.adalo.com/u/theadaloguy)\
**Post date:** [March 22, 2022, 2:10pm UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/18 "2022-03-22T14:10:46Z")

</div>

It’s a very weird issue when pasting into Adalo. Glad you managed to find the solution.

---

<div class="post-metadata">

**Author:** ![ishantanusrivastava](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/ishantanusrivastava/32/34947_2.png) [@ishantanusrivastava](https://forum.adalo.com/u/ishantanusrivastava)\
**Post date:** [July 26, 2022, 10:10am UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/19 "2022-07-26T10:10:20Z")

</div>

Hi,

I’m using your bucket policy & CORS in one of my client projects. But when I installed the final build on both devices I have via the App store & play store. Audio & videos are not playing is that something which may be a restriction from AWS? Have you encountered this type of bug before?

One update - When I’m uploading the video/audio directly to the adalo database its playing in final build.

Looking forward to your reply.

Thanks

---

<div class="post-metadata">

**Author:** ![theadaloguy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/theadaloguy/32/8023_2.png) [@theadaloguy](https://forum.adalo.com/u/theadaloguy)\
**Post date:** [July 26, 2022, 12:28pm UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/20 "2022-07-26T12:28:39Z")

</div>

Right now the CORS policy is set up to accept requests from an Adalo PWA. To make this for an app, this simplest way is to accept requests from anywhere (make it public).

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/2/6/26ed34b626157061d7e1cc3e796573bdd7538aec.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/6/e/6e78e46bee254203f28f41a90e9588663d9d9318.jpeg)

It’s been a while since i’ve done anything with S3 / PLYR so let me know how you get on.

---

<div class="post-metadata">

**Author:** ![ishantanusrivastava](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/ishantanusrivastava/32/34947_2.png) [@ishantanusrivastava](https://forum.adalo.com/u/ishantanusrivastava)\
**Post date:** [July 26, 2022, 2:46pm UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/21 "2022-07-26T14:46:14Z")

</div>

Hi @theadaloguy ,

Its already disabled →

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/f/d/fd5c804fd89e7ef9cdd062b7bac5568dc52dd30b.png)

---

<div class="post-metadata">

**Author:** ![ishantanusrivastava](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/ishantanusrivastava/32/34947_2.png) [@ishantanusrivastava](https://forum.adalo.com/u/ishantanusrivastava)\
**Post date:** [July 28, 2022, 9:21am UTC](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494/22 "2022-07-28T09:21:59Z")

</div>

Hi @theadaloguy ,

I’m still looking forward to your answer.

Thanks

[Next page](https://forum.adalo.com/t/plyr-component-amazon-s3-youtube-video/6494.md?page=2)
