# Video Upload to YouTube and Vimeo using Theme Component

**URL:** https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079
**Category:** Theme component
**Tags:** broken
**Created:** [November 13, 2020, 9:16pm UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079 "2020-11-13T21:16:22Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![ti0](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ti0/32/184402_2.png) [@ti0](https://meta.discourse.org/u/ti0)
#### Post date: [November 13, 2020, 9:16pm UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/1 "2020-11-13T21:16:22Z")

</div>

This new theme component enables video uploads from the Discourse composer to YouTube and Vimeo. For those already familiar with [the plugin I developed recently](https://meta.discourse.org/t/discourse-video-upload-plugin-with-youtube-and-vimeo/168569), the same is now available in this Theme Component which can be added to any theme. This makes for a much easier installation and works in exactly the same way as the plugin.

### Features

All forum members can upload videos to Vimeo or YouTube (admins can choose to enable either or both).

Admins can control the view and embed privacy of the videos uploaded to Vimeo using admin settings.

User can control view privacy of the videos uploaded to YouTube from the upload modal.

You can watch a demo of the plugin here (everything is same in the component except for the settings page. The component settings page is found under Admin \> Customize \> Components \> Video Upload):

[![](https://global.discourse-cdn.com/meta/original/4X/6/1/d/61da69f9379b4b91ec1e00dfd2f2681942238da8.jpeg "Discourse Video Upload Plugin with YouTube and Vimeo Demo") ](https://vimeo.com/474476485)

### Configuration

**Important** : For theme components, you need to make sure you activate the component for the themes used on your instance (either click `Add all themes` or choose the themes you want).

 ![image](https://global.discourse-cdn.com/meta/original/3X/3/7/37e188a773f3cabecd69e21f9d196a0676ac712a.png)

The developer setup for enabling uploads to YouTube and Vimeo are listed below. If you prefer someone to do it for you, you can request support by contacting me, @ti0.

### For YouTube Uploads

YouTube uploads go to the uploaders account, unlike Vimeo uploads which go to a common account.

> **View steps**
>
> - Create an account and project at [https://console.developers.google.com](https://console.developers.google.com)
> 
> - Enable the YouTube Data API v3
> 
> - Setup the OAuth consent screen for External users (unless all users on your Discourse forum belong to one Google organization).
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/b/9/b9551db2408411188b8f8417efd3425184004117.png)
> 
> - Setup your credentials:
> 
> - Copy the generated client ID only
> 
> - Go to the component settings page in Discourse Admin, and paste the client ID in the `youtube api client id` field.
> 
> - Enable Youtube uploads by enabling this setting: `youtube upload enabled`
> 
> - Adjust the default view privacy options for Youtube if required.
> 
> - You should now be able to upload videos from the Discourse topic composer directly to YouTube.

### For Vimeo Uploads

Once you setup the component with the steps below, **all community users will be able to upload videos to _your Vimeo account_.**

You are responsible for limits and usage of your Vimeo account.

> **View steps**
>
> - Create an account and app on Vimeo Developers:  
> [https://developer.vimeo.com/apps/new](https://developer.vimeo.com/apps/new)
> 
> - Generate an access token with Upload permissions
> 
> - Go to the component settings page on your Discourse Admin, and add the generated access token in the `vimeo api access token` setting, and save
> 
> - Enable Vimeo uploads by enabling the `vimeo upload enabled` setting.
> 
> - Adjust view and embed privacy options
> 
> - You should now be able to upload videos from the Discourse topic composer directly to Vimeo

## Posting a video

- To post a video, create a new Topic or reply to an existing  
topic.

- Click the new `Upload to Video` button in the composer toolbar (the video icon). This button is only visible if you have enabled either YouTube or Vimeo (or both) in the plugin settings.

- Choose a video file and edit the details such as title and description, if you wish.

- Click the Upload to Vimeo or Upload to YouTube button.

- Save the post, and your video can be viewed by all other community users  
(depending on privacy options you selected).

### Feature Requests

You can request additional features or support by [contacting me](https://meta.discourse.org/u/ti0/summary) @ti0.

### Contributions

If you found this theme component helpful, please consider donating to the developer using this Paypal link: [PayPal.Me](https://paypal.me/ti0it)

Big and small contributions are equally welcome 🙂

If you would like to enhance the component / plugin, PRs are welcome.

| | | |
| --- | --- | --- |
| 👓 | **Preview** | [Theme creator preview](https://theme-creator.discourse.org/u/ti0/themes/4081) |
| 🛠 | **Repository** | [discourse-video-upload](https://github.com/xomads/discourse-video-upload-component) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [November 13, 2020, 9:18pm UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/2 "2020-11-13T21:18:55Z")

</div>

> [@ti0](#):
>
> This makes for a much easier installation and works in exactly the same way as the plugin.

Will the plugin be discontinued then?

---

<div class="post-metadata">

### Author: ![ti0](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ti0/32/184402_2.png) [@ti0](https://meta.discourse.org/u/ti0)
#### Post date: [November 13, 2020, 9:20pm UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/3 "2020-11-13T21:20:00Z")

</div>

Not right now, but I think it will be much easier just to maintain the theme component. I will keep the plugin around for now, but recommend migrating to the theme component.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [November 14, 2020, 7:56am UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/4 "2020-11-14T07:56:26Z")

</div>

Thank you @ti0 ❤ This is awesome again 🙂❤ Much easier to use a theme component then a plugin.

One question. Can you add these text to translate? **Uploading , Transcoding Video and the video details title, description etc?** Thank you! 🙂

---

<div class="post-metadata">

### Author: ![ti0](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ti0/32/184402_2.png) [@ti0](https://meta.discourse.org/u/ti0)
#### Post date: [November 14, 2020, 1:41pm UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/5 "2020-11-14T13:41:09Z")

</div>

@Don all labels in the component can be customized now 🙂

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [January 4, 2021, 9:17pm UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/6 "2021-01-04T21:17:32Z")

</div>

Hello

I really like your component thank you again to make it. ❤

It worked super good but now we have some problem 😕  
Sometimes we have error while transcoding video (only mp4 files) `status.error.transcode`. The video is upload correctly but only shown on Vimeo and not place the link in composer.

The other problem is we cannot upload mp4 files from MacOS Safari browser.

Is that possible to solve these problems somehow?

Thank you for your answer! 🙂

---

<div class="post-metadata">

### Author: ![ti0](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ti0/32/184402_2.png) [@ti0](https://meta.discourse.org/u/ti0)
#### Post date: [January 5, 2021, 12:40am UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/7 "2021-01-05T00:40:57Z")

</div>

Hello @Don, thanks for catching this edge case on MacOS Safari. It looks like an issue in Safari ([a reference on SO](https://stackoverflow.com/questions/19107685/safari-input-type-file-accept-video-ignores-mp4-files)), I have fixed this issue in the theme component, so once you update it, then refresh the page, you should be able to upload mp4 from Safari. I just tested on my own machine and it works now.

Regarding transcode errors, that happens on the Vimeo end, no way to do anything on our side.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [January 5, 2021, 1:11am UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/8 "2021-01-05T01:11:07Z")

</div>

Thank you for the quick fix! Now it works great on Safari 🙂

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [March 11, 2021, 1:01pm UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/9 "2021-03-11T13:01:36Z")

</div>

Hello @ti0 ,

It seems to the Vimeo upload mechanism changed. When place the link on forum composer. Then on Vimeo they start converting the video. So the video cannot oneboxed and play on the forum because not ready. Thank you for your help! 🙂

---

<div class="post-metadata">

### Author: ![anon82467725](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@anon82467725](https://meta.discourse.org/u/anon82467725)
#### Post date: [March 11, 2021, 6:53pm UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/10 "2021-03-11T18:53:44Z")

</div>

> [@Don](#):
>
> The other problem is we cannot upload mp4 files from MacOS Safari browser.

Same here, but the issue now seems to affect Mozilla Firefox on all platforms.

There were a few other issues that occurred in Mozilla Firefox, but I will have to check back on those issues to provide further clarification.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [March 12, 2021, 8:08pm UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/11 "2021-03-12T20:08:09Z")

</div>

So I think the problem is this. On Vimeo there is **Waiting for convert** section after **Upload** but before **Convert**.

**On the Component there is a** ⬇  
`const STATUS_POLLING_INTERVAL_MILLIS = 10000;`

> If I am correct it means after the Upload process it send a request to Vimeo every 10 sec which is while the Waiting process comes back as the video complete. Because Vimeo Api not support Webhooks etc… So we need to send request periodically to find out the Transcoding process still processing or it is done.

I changed this to 60sec for us until comes a better solution this will enough most of the uploads to skip the Waiting process request. I tested with small ~10mb , medium ~500mb and large uploads ~ 2gb.  
With small uploads the waiting time is few sec ~4-5sec, medium is ~10-15sec, large is ~40-45sec. I think it is depending how big is the uploaded file.  
It seems works but if **Waiting to convert process** take more time than 60sec it will paste the link same as before. If we can skip this Waiting process it will be good.

---

<div class="post-metadata">

### Author: ![Zup](https://avatars.discourse-cdn.com/v4/letter/z/c37758/32.png) [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [March 18, 2021, 12:04am UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/12 "2021-03-18T00:04:19Z")

</div>

i’d prefer Vimeo uploads go to uploader’s account rather than my common account… possible?

---

<div class="post-metadata">

### Author: ![linzo](https://avatars.discourse-cdn.com/v4/letter/l/97f17d/32.png) [@linzo](https://meta.discourse.org/u/linzo)
#### Post date: [July 18, 2021, 12:06pm UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/13 "2021-07-18T12:06:40Z")

</div>

@ti0 I don’t know if it’s just me, but I think something is broken. The upload is stuck at `Authenticating` and the following error is shown in Chrome Console

> Some resources are blocked because their origin is not listed in your site’s Content Security Policy (CSP). Your site’s CSP is allowlist-based, so resources must be listed in the allowlist in order to be accessed.
> 
> A site’s Content Security Policy is set either as via an HTTP header (recommended), or via a meta HTML tag.
> 
> To fix this issue do one of the following:
> 
> ```
> 1. (Recommended) If you're using an allowlist for `'script-src'` , consider switching from an allowlist CSP to a strict CSP, because strict CSPs are more robust against XSS . See how to set a strict CSP .
> 
> ```

> ```
> 2. Or carefully check that all of the blocked resources are trustworthy; if they are, include their sources in the CSP of your site. ⚠️Never add a source you don't trust to your site's CSP. If you don't trust the source, consider hosting resources on your own site instead.
> 
> ```
> 
> AFFECTED RESOURCES  
> [https://apis.google.com/\_/scs/apps-static/\_/js/k=oz.gapi.en\_US.bnEFfFZ9cyI.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNaq8ri2P66tzK7chsKcRiE1CsLyQ/cb=gapi.loaded\_0?le=ili,ipu,ili,ipu`](https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.bnEFfFZ9cyI.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNaq8ri2P66tzK7chsKcRiE1CsLyQ/cb=gapi.loaded_0?le=ili,ipu,ili,ipu%60)

> blocked script-src-elem api.js:12

---

<div class="post-metadata">

### Author: ![ti0](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ti0/32/184402_2.png) [@ti0](https://meta.discourse.org/u/ti0)
#### Post date: [August 25, 2021, 5:02pm UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/14 "2021-08-25T17:02:13Z")

</div>

@linzo this is a CSP issue, it has nothing to do with the theme component. Please read about Discourse CSP here: [Mitigate XSS Attacks with Content Security Policy](https://meta.discourse.org/t/mitigate-xss-attacks-with-content-security-policy/104243)

> [@Zup](#):
>
> i’d prefer Vimeo uploads go to uploader’s account rather than my common account… possible?

@Zup, this is an additional feature request - possible of course but it is additional work which will have to be paid if you want it implemented. Let me know if you want that.

> [@Don](#):
>
> So the video cannot oneboxed and play on the forum because not ready.

Sorry for the delayed response - yes there is a transcoding process after the upload, and the upload dialog will show that before it embeds the video. This is working as expected on my side. It waits till the transcoding completes, only then it closes the dialog and embeds the video. Here is a demo:

https://player.vimeo.com/video/592291400?badge=0&autopause=0&player_id=0&app_id=58479&h=afab77c21c

---

<div class="post-metadata">

### Author: ![debryc](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/debryc/32/101652_2.png) [@debryc](https://meta.discourse.org/u/debryc)
#### Post date: [September 23, 2021, 5:38pm UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/15 "2021-09-23T17:38:59Z")

</div>

I’m really excited for the potential of this theme component. Does this theme component also work from mobile? As in, if I’m on my phone can I upload a video from my photo library?

I tried viewing it in the Theme creator preview and received an Access Denied notice.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [September 23, 2021, 5:58pm UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/16 "2021-09-23T17:58:34Z")

</div>

Hi Deborah,

We use it on our forum with Vimeo uploads and works really well on every device. 🙂 The choosing process is same like Discourse but after you select the video you have to click the upload vimeo or youtube button to start the uploading.

---

<div class="post-metadata">

### Author: ![debryc](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/debryc/32/101652_2.png) [@debryc](https://meta.discourse.org/u/debryc)
#### Post date: [September 23, 2021, 6:00pm UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/17 "2021-09-23T18:00:23Z")

</div>

Is your forum public? Could I check it out? Would love to see it in action! What’s the url?

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [September 24, 2021, 4:22am UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/18 "2021-09-24T04:22:20Z")

</div>

This is working great! A nice feature would be the ability to have the videos upload to a particular folder on vimeo so I could keep the user’s uploads separate from my own. Thanks for this!

---

<div class="post-metadata">

### Author: ![ti0](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ti0/32/184402_2.png) [@ti0](https://meta.discourse.org/u/ti0)
#### Post date: [September 24, 2021, 4:44am UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/19 "2021-09-24T04:44:21Z")

</div>

Glad you like it 🙂 If you are willing to contribute for this feature request I can implement it or you can submit a PR, let me know.

---

<div class="post-metadata">

### Author: ![debryc](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/debryc/32/101652_2.png) [@debryc](https://meta.discourse.org/u/debryc)
#### Post date: [September 24, 2021, 11:00am UTC](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079/20 "2021-09-24T11:00:39Z")

</div>

Can videos be auto-captioned and the captions displayed by default? That’s really important for us for accessibility.

[Next page](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079.md?page=2)
