How to add html5 video plugin to django ckeditor

Hello, in this post i am going to show you how to download and add html5video plugin to django ckeditor.

Please note the following;

  • I am using django-ckeditor 6.2.0 for this post.
  • I am assuming that you have your ckeditor installed in your django project.
  • Also for the vidoe upload to server functionality to work you have to use "RichTextUploadingField()" for your model field.
  • The process followed in this article is similar that of my previous article on how to add YouTube plugin to Django CkEditor. click on this link to read the article.

Alright lets begin;

Step 1

Go to ckeditor html5 video plugin download website by clicking on this link.

Step 2

Scroll down and click on the download button to download the html5video plugin zipfile.

Step 3

After downloading extract the zipfile into a new folder. We are not extracting the zipfile directly into the ckeditor plugins folder because the html5 video folder is not the first level folder we get on extraction.

Step 4

Open the folder you extracted the zipfile to. Inside you will see another folder, open that one too then copy the html5video folder inside it.

Step 5

Go to your django project root directory. I need you to focus on this next part, you have to follow my steps precisely

  • In your project root directory inside static folder create a folder and name it ckeditor
  • Open the folder you just created and inside it create another folder and name it ckeditor.
  • Open the ckeditor folder you created in stage 2 and inside it create a folder and name it plugins.
  • Now finallly inside the plugins folder you created paste in the html5video folder you copied in step 4 

Your directory should now look like this static / ckeditor / ckeditor / plugins / html5video/.

Step 6

Go to your project file and add in this urlpattern settings.

urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Your should now look like the one below

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('', include("blog.urls")),
    path('ckeditor/', include('ckeditor_uploader.urls'))
urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Step 7

Ensure that the code below is in your file. If it is not then copy and paste it inside.

STATIC_URL = 'static/'
STATICFILES_DIRS = os.path.join(BASE_DIR, 'static'),
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles_build', 'static')
MEDIA_URL = '/images/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images')

The will ensure that django also looks for staticfiles in this directory "static".

Step 8

Add the code below to your django projects

    'default': {
        'extraPlugins': ','.join(


Step 9

For the final step, stop your development server if you have one running and then restart your ide or code editor. If everything worked successfully you should see  video upload option in your ckeditor toolbar as shown below.



From this post we have been able to download the html5video plugin and added it to ckeditor to enable the use of video upload to server functionality in a django project. This process also works if you are using django rest framework as a backend server

Thanks for reading, please leave a comment down below if you have any questions about the post.



Hello, my name is Abubakar Zakari. Am a budding fullstack developer from Nigeria who loves developing softwares and learning new frameworks and langauges.


Select image

No comment yet




Frontend Development |Backend Development |Full Website Development |Bootstrap Website upgrades | Website Debbugging | Website Hosting & deployment


Interested in hiring me or collaborating with me on a project, click on any of the links below to get my social media handle

Or contact me via Tel: (+234)-806-225-7480 | Email:
Privacy Policy

By using our website,
you agree that devmaesters can store cookies on your device and disclose information in accordance with our privacy policy.