Build a Django YouTube Clone with ImageKit: Video Upload and Streaming

Introduction

Building a YouTube clone in Django sounds like a weekend project until you hit the hard parts: storing and streaming large video files, generating thumbnails reliably, serving optimized variants to different devices, and keeping the upload flow from collapsing under multi-gigabyte uploads. Standard Django FileField doesn’t cut it.

This walkthrough shows the architecture that does — Django for the backend, custom user model for channels, ImageKit for media storage and transforms, AJAX for likes/dislikes, and the modeling patterns that keep the codebase manageable as features pile on. Aimed at intermediate Django developers who already know views, models, and templates.

📚 Table of contents

What we’re building

A working YouTube-style app with: user registration and login, upload page with drag-and-drop video and thumbnail selection, generated or custom thumbnails, optimized streaming, channel pages per user, a feed of all uploaded videos, view tracking, and like/dislike voting with AJAX (no full page reloads). Styling is provided as static CSS; the article focuses on the Django and ImageKit pieces.

The architecture in one diagram

The split matters. Your Django app stays small and stateless about media; ImageKit handles the heavy lifting of bandwidth, caching, format conversion, and adaptive quality.

Project setup and apps split

python -m venv venv && source venv/bin/activate
pip install django imagekitio python-dotenv
django-admin startproject ytclone .
python manage.py startapp accounts
python manage.py startapp videos

Split into two apps: accounts for the custom user and auth flows, videos for everything else. Add both to INSTALLED_APPS. Keep ImageKit credentials in .env (never commit them — ImageKit recently saw a public-repo leak of keys from a well-known competitor).

Custom user model and registration form

YouTube users have channels. That means at minimum a unique username on top of email. The Django way to add fields like that is a custom user model defined before running first migrations:

from django.contrib.auth.models import AbstractUser
from django.db import models

class User(AbstractUser):
    bio = models.TextField(blank=True)
    avatar_url = models.URLField(blank=True)

    def __str__(self):
        return self.username

In settings.py set AUTH_USER_MODEL = "accounts.User". The registration form extends UserCreationForm to require email plus the custom fields:

from django.contrib.auth.forms import UserCreationForm
from .models import User

class RegistrationForm(UserCreationForm):
    class Meta:
        model = User
        fields = ("username", "email", "password1", "password2")

Wire up the standard login, logout, and a register view that creates the user and redirects to the homepage. The base template can switch between “Sign in / Sign up” and “Log out” with {% if user.is_authenticated %}.

Why ImageKit (and not Django FileField)

Storing user-uploaded video in Django’s MEDIA_ROOT works in a tutorial. It fails in production for predictable reasons:

• Multi-GB uploads stall the WSGI worker and starve other requests.
• You serve raw files through Django, eating server CPU and bandwidth.
• No thumbnail generation, no format conversion, no adaptive bitrate streaming.
• One server’s disk fills up; horizontal scaling becomes painful.

ImageKit fixes all four. The upload goes directly from browser to ImageKit using a server-signed upload token, your Django app stores only the resulting file ID and URL, and ImageKit handles delivery with automatic format selection, on-the-fly transforms, and CDN caching.

Uploading videos and thumbnails

Build a small ImageKit client module that exposes two functions — upload_video(file) and upload_thumbnail(file). Each returns a (url, file_id) tuple that the view persists on the Video model.

from imagekitio import ImageKit
from imagekitio.models.UploadFileRequestOptions import UploadFileRequestOptions

ik = ImageKit(
    private_key=settings.IK_PRIVATE_KEY,
    public_key=settings.IK_PUBLIC_KEY,
    url_endpoint=settings.IK_URL_ENDPOINT,
)

def upload_video(file):
    opts = UploadFileRequestOptions(folder="/videos/", use_unique_file_name=True)
    res = ik.upload_file(file=file, file_name=file.name, options=opts)
    return res.url, res.file_id

def upload_thumbnail(file):
    opts = UploadFileRequestOptions(folder="/thumbnails/", use_unique_file_name=True)
    res = ik.upload_file(file=file, file_name=file.name, options=opts)
    return res.url, res.file_id

The view ties it together. Use the @login_required and @require_POST decorators on the upload action, validate the form, push the files to ImageKit, then save the Video with the returned URLs.

Generated vs custom thumbnails

Users either upload a custom thumbnail or let ImageKit auto-generate one from the video’s first seconds. The upload form supports both: a hidden file input for the thumbnail with an image preview, and a fallback path that asks ImageKit for a generated still.

Frontend trick: an <input type="file"> with display: none and a <label> wrapping it gives you a click-to-select UI that’s easier to style than the default file picker. Add an img preview tag whose src is set via JavaScript’s FileReader when the user selects a file.

Video model with computed URL properties

The model stores raw ImageKit metadata. Computed properties build the streaming, optimized, and thumbnail URLs on demand. This is what keeps your templates clean.

from django.db import models
from django.conf import settings
from .imagekit_client import get_optimized_video_url, get_streaming_url, get_thumbnail_url

class Video(models.Model):
    uploader = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
    title = models.CharField(max_length=200)
    description = models.TextField(blank=True)
    video_url = models.URLField()
    video_file_id = models.CharField(max_length=100)
    thumbnail_url = models.URLField(blank=True)
    thumbnail_file_id = models.CharField(max_length=100, blank=True)
    views = models.PositiveIntegerField(default=0)
    created_at = models.DateTimeField(auto_now_add=True)

    @property
    def display_thumbnail_url(self):
        if self.thumbnail_url and "/thumbnails/" in self.thumbnail_url:
            return self.thumbnail_url
        return self.generated_thumbnail_url

    @property
    def generated_thumbnail_url(self):
        return get_thumbnail_url(self.video_url)

    @property
    def stream_url(self):
        return get_streaming_url(self.video_url)

    @property
    def optimized_url(self):
        return get_optimized_video_url(self.video_url)

The display_thumbnail_url property reads cleanly in templates — {{ video.display_thumbnail_url }} — and hides the “custom or auto-generated?” branching from view code.

Streaming, optimization, and adaptive quality

ImageKit’s URL transforms control everything about delivery. A handful you’ll use:

• tr=f-auto — auto-pick format (WebM for Chrome, MP4 for Safari).
• tr=q-80 — quality target (80% of original).
• tr=h-720,w-1280 — explicit dimensions.
• ?streaming=hls on a video URL — adaptive bitrate manifest. Drop this into a video player and the browser fetches the right quality for the user’s bandwidth.

Configure streaming defaults in your ImageKit dashboard under Configuration → Settings → Videos so every uploaded file gets reasonable defaults without per-URL parameters.

Likes, dislikes, and view counts with AJAX

Voting is a Vote model with a user, video, and integer value (-1, 0, 1). The view endpoint accepts a POST with the requested vote, upserts the Vote row, and returns updated counts as JSON. The frontend swaps button states and label numbers without a reload.

@login_required
@require_POST
def vote(request, video_id):
    video = get_object_or_404(Video, pk=video_id)
    value = int(request.POST.get("value", 0))  # -1, 0, or 1
    Vote.objects.update_or_create(
        user=request.user, video=video, defaults={"value": value}
    )
    likes = video.votes.filter(value=1).count()
    dislikes = video.votes.filter(value=-1).count()
    return JsonResponse({"likes": likes, "dislikes": dislikes, "user_vote": value})

View counts: bump a counter on the watch endpoint, but throttle with a cookie or session key so a single user refreshing the page doesn’t inflate the count. For a real product, an F("views") + 1 atomic update prevents race conditions.

Channel pages and the home feed

The home feed lists all videos newest-first with a thumbnail-and-title card. The channel page filters that same query by uploader=user. Both views reuse the same partial template video_card.html:

<a href="{% url 'video_detail' video.id %}" class="video-card">
  <div class="video-thumbnail">
    <img src="{{ video.display_thumbnail_url }}"
         alt="{{ video.title }}" loading="lazy">
    <span class="play-icon">▶</span>
  </div>
  <div class="video-info">
    <h3 class="video-title">{{ video.title }}</h3>
    <span class="channel">{{ video.uploader.username }}</span>
    <span class="meta">{{ video.views }} views · {{ video.created_at|timesince }} ago</span>
  </div>
</a>

Include it from both the home feed and the channel page. loading="lazy" on the img tag lets the browser defer offscreen thumbnails, which keeps the home page fast even with hundreds of videos.

❌ Common mistakes

💡 Pro tips

Conclusion

A YouTube clone in Django stops being a toy the moment you stop trying to serve video files yourself. Push the media to a service that’s built for it — ImageKit, Cloudflare Stream, or AWS MediaConvert if you have AWS roots — and Django happily handles the metadata, business logic, auth, and AJAX glue. The architecture in this article is the smallest version of that pattern that scales beyond a hundred videos without rework.

Next step: add comments, subscriptions, and a search endpoint with Postgres full-text search. The code patterns transfer directly.

Related reading: Next.js video player with ImageKit tutorial — FastAPI + React B2B SaaS with Clerk — Claude AI review

Explore More on DevShelf

• →
  FastAPI + React B2B SaaS with Clerk

  The next build after Django — multi-tenant auth, React frontend, and production deployment using FastAPI and Clerk.

• →
  Defensive Python: Edge Cases and Validation

  The Python habits that prevent your video upload pipeline from breaking on unexpected file types and edge-case inputs.