147
AI ready

YouTube Channel Website Template

£29 View live demo or the whole Vault, £99

Seven-page YouTube channel website template for creators, podcasts and documentary studios: a full-bleed staged hero with a giant wordmark, hand-drawn marks on photographs, a storyboard player with chapters and a live transcript, a pile of episode prints to throw around, plus membership and sponsor pages.

ScrollTrigger Lenis advanced
11 more details
dragdrag-scrubsvg-animationscroll-revealparallaxfilterclick-togglehover-effectview-transitionskeyboard-navigationprogressive-enhancement
Open YouTube Channel template in new tab

The business, people and figures in this demo are made up for the example. Any resemblance to a real company is a coincidence.

Released

About this template

A seven-page site for a channel with people at the front of it, built on staged photographs in full colour and huge blocks of flat colour taken from the hosts' own clothes. Hand-drawn marks sit on the photographs and point at real things in them: a circle round a hat, an arrow at a pair of bare feet, a name scrawled beside a person. AFK, a channel of twenty-minute documentaries by Bea and Tom, who left their desks in Leeds and drive a pale blue van, is the worked example.

Read the full template overview

The home page opens on a full-bleed photograph with the wordmark set wider than the window, standing behind the man leaping over the desk and in front of the sky, with the latest film on a card in the corner. A tomato block says hello, thumbnails carry big set headlines, the series run as a giant list of names with diagonal arrows, and cinematic rows run to the page edge on stark white, with a tilted print crossing into a panel of series colour.

The Episode page has the lead interaction: drag along a chapter track and the still changes, a mark draws itself on the photograph and the transcript follows. Films is a pile of prints you can throw across a table beside a running order in series colours, with a full filterable list below it. There are also a series page in its own colour, an about page with a kit list that circles things in the van, a sponsor page and a membership page with working front-end forms.

Making it yours means swapping the photographs, then moving the marks: each one is a short list of coordinates in the photograph's own pixels, so it lands on the same thing at every width. Seven colour tokens repaint the whole site, and the same structure suits a podcast, a film studio, a documentary series or any creator business.

YouTube Channel - website template preview

What's included

13 items
  • Full-bleed hero with a wordmark wider than feels comfortable, standing between the photograph and a clean cut-out of the people, with a latest-film card and a hand-drawn note; phones get their own frame with the letters clear above the hosts
  • Hand-drawn SVG marks stored in image coordinates, so circles and arrows land on the same thing at every crop and draw on once as they enter view
  • Storyboard player: six stills, six chapters and a full transcript driven from one native range input by dragging, clicking, arrow keys or autoplay
  • Real video support: add a video ID to one attribute and the player becomes a click-to-load facade that makes no third-party request until it is pressed
  • The pile: nineteen episode prints to drag and throw across a table with momentum, or bring to the top from a list of real links
  • Filterable film list by series, with thumbnails that carry large set headlines and durations
  • Giant arrow list of series, with the matching photograph changing beside it on hover and focus
  • Film rows that run to the page edge on the series colour, each with a tilted print of the next film crossing the join; scattered tilted thumbnails round big titles on the home, sponsor and membership pages
  • Series page in its own colour, with a notebook chart of monthly water temperatures that you pick through by month
  • About page with a kit list that circles each item on a photograph of the van, and a channel timeline by year
  • Sponsor page with audience figures, rules you can read in either host's voice, and a front-end enquiry form
  • Membership page with three selectable tiers that update the form, and an FAQ
  • Seven plain HTML pages with a cross-document view transition, complete without JavaScript and under reduced motion, with a full-screen colour menu on phones

Perfect for

5 use cases
  • YouTube channels and creator businesses with named hosts
  • Podcasts with episodes, transcripts, sponsors and paying members
  • Independent film studios and documentary series
  • Creator memberships and sponsor media kits
  • Learning pattern: one native range input driving stills, drawn SVG marks and a synced transcript

How it works

5 sections

Photographs with marks that stay put

Each photograph sits in a box with its own ratio that behaves like object-fit cover, and its marks are an SVG sharing the photograph's pixel coordinates. Crop or resize the frame and a circle stays on the hat. Strokes are real paths that draw on once when they come into view, and the words beside them are set in a handwriting face, so they can be edited as text.

The storyboard player

A native range input owns the position, which keeps keyboard and screen reader behaviour standard, and dragging on the track sets the same value. The current chapter picks the still and draws its mark, and the transcript moves inside its own scroller without moving the page. On touch, a vertical swipe that lands on the track still scrolls the page. Without JavaScript it reads as a list of stills and a full transcript.

Real video on a facade

With no video ID the player runs as a storyboard and says so on the page. Put an ID in data-youtube-id and the large button loads the privacy-enhanced embed on click, starting from the current position. Nothing is requested from the video host before that click.

The pile of prints

Each print is a real link to its episode. Dragging the top one far or fast enough throws it across the table with its own momentum, and a short drag springs back. A plain tap follows the link. Buttons throw and restore the pile, and the running order beside it, a stack of strips in each series colour, brings any film to the top, so nothing depends on dragging.

Plain pages and fallbacks

Pages are ordinary HTML files joined by a cross-document view transition, with no build step. With scripts or the CDN blocked, the site reads as a complete document: the pile becomes the list, the player becomes stills and text, and every mark is simply visible. Reduced motion removes the movement and keeps every control.

Plugins ScrollTrigger
Difficulty Advanced
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo (7 pages, lowest score shown), from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

Which businesses does this YouTube channel template suit besides a channel?

Anything with named people and a back catalogue: a podcast with episodes and transcripts, an independent film studio, a documentary series, or a creator business selling memberships and sponsor slots. The series become your shows or seasons, the storyboard player takes your own video or stills, and the sponsor page works as a media kit.

How do I put my real videos in the player?

Set your video's ID in the data-youtube-id attribute on the player. The large button then loads the embed on click, and no request reaches the video host until someone presses it. Leave the attribute empty and the player runs as a storyboard of stills, and the page says so plainly. Chapters and transcript lines are plain HTML with times in attributes.

How do I move the hand-drawn marks onto my own photographs?

Every mark is an SVG path or text element laid over the photograph, using that photograph's own pixel coordinates. Open your image at full size, read off where the hat or the face is, and change the numbers. Because the marks share the photograph's coordinates, they stay on target at every crop. Delete the SVG if a photograph does not need one.

Are the sponsor, membership and newsletter forms connected to anything?

No. All three are static front ends. The sponsor form collects a name, company, email, slot and message; the membership form collects a tier, name, email and note and takes no payment; the newsletter form collects an email. They validate and show a confirmation that says nothing was sent. Point them at Formspree, Netlify Forms, a mailing list or your membership platform.

How many episodes can the pile and film list hold?

The demo has nineteen, and adding or removing one means copying or deleting one print link, one list row and one card. Only the top few prints load their images until they are needed, so a longer catalogue stays light. Past about forty, we suggest keeping the pile to recent films and leave the rest in the filterable list.

Who are the people in the photographs, and can I use them?

Nobody real. All 26 photographs are generated placeholders made for this demo, and every name, figure and sponsor in the copy is invented. They are there to show the composition, so plan to replace them with your own staged pictures. The hero has a separate cut-out layer and a tall phone version, so a new hero needs its subject lifted onto a transparent background too.

Paid template

Purchase to unlock the code.

Buying YouTube Channel opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£29 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £99, one payment.

Documentation

Quick Start

  1. Unzip the folder and open index.html through any static server, or upload it to any static host. There is no build step.
  2. Pages: index.html, episodes.html, episode.html, series.html, about.html, sponsors.html, join.html.
  3. Replace the photographs, then the copy, then repaint the colour tokens at the top of assets/style.css.

Using It With Your Own Design

Everything is plain HTML and CSS with data- hooks, and every feature in assets/script.js returns early if its markup is missing. You can delete any section from any page and the rest keeps working. To lift one part into another site, copy its section, the matching block of assets/style.css and its function from the script. The pages load assets/script.js; edit it directly, there is nothing to rebuild.

Palette

Seven colours in :root, named after what they came from: --tomato (Bea's jumper), --cobalt (Tom's jacket), --sky (their portrait wall), --cream, --ink, --white and --pink, plus --leaf for one series. Each .block--* class sets a ground and its text colour together. Series colours are set once in the [data-series] rules. Measured contrast pairs are recorded in the comment at the top of the stylesheet. Ink on tomato only just passes for body copy, so re-measure if you change either colour.

Type is self-hosted latin WOFF2: Archivo at its widest width in Black, Newsreader Bold, Figtree, and Gochi Hand for the scrawls. All four are under the SIL Open Font License, included as assets/fonts/OFL.txt.

Photographs

All 26 photographs are generated placeholders. Every person in them is invented, and they are there to be replaced with your own pictures. Replace the WebP files in assets/img/, keeping the same file names, and update the width and height attributes in the HTML if the proportions change. Each large photograph also has a -640 version for phones. Photographs are never filtered or graded in CSS.

The hero source is 1536px wide, which is soft on a large window. If you shoot your own, aim for 2800px or more. The hero uses two layers: hero.webp and hero-fore.webp, a cut-out of the people that sits in front of the wordmark, saved at twice the width so its edges stay sharp. Phones up to 760px use hero-phone.webp and hero-phone-fore.webp, a taller frame of the same picture with extra sky added, so the letters sit clear above Tom. A new hero needs a new cut-out with a transparent background, and a phone pair if you want the same arrangement. To drop the layering, delete the two foreground images and the wordmark simply sits over the photograph.

Hand marks

Marks are inline SVG laid over a photograph. The SVG's viewBox is the photograph's own pixel size, so a coordinate read off the image at full size lands on the same thing at every crop.

Code snippet omitted: it ships with the download.

  • --r is the photograph's ratio; --fx and --fy choose the crop, from 0 to 1.
  • .mk is a stroke with pathLength="1", which is what lets it draw on. .mk--head draws just after, for arrowheads.
  • .marks--ink turns a mark black for use on a light part of a photograph.
  • Marks are decorative and aria-hidden, so anything important must also be in the alt text or copy.

Player (episode.html)

The player is a storyboard by default. The demo has no real film, so it does not fake playback: it shows stills, chapters and transcript, and says so on the page.

To use a real video, set the ID on the player:

Code snippet omitted: it ships with the download.

The big button then loads the embed on click, from the current position. Nothing is requested from the video host until that click.

  • Chapters: each [data-frame] has data-start, data-end and data-name, in seconds. The track segments and chapter buttons alongside use the same values.
  • Transcript: each [data-line] has data-t in seconds.
  • Total length: the max of [data-range].
  • data-scrub on a frame's marks makes them draw with the playhead rather than when scrolled into view.

Film rows and scatters

On the home page each .row--film takes its colour from data-series, and .row--flip mirrors it. The .slip inside is a tilted print linking to the next film in that series; its angle is --tilt. .scatter places thumbnails at named corners round a title, and is used on the home, sponsor and membership pages.

The pile (episodes.html)

Each print is <a data-print="id" data-series="key">, and images use data-src so that only the top few load up front. Each row in [data-pile-list] names the print it brings to the top in data-pick, and takes its strip colour from data-series. Add a film by copying one print, one list row and one .film card.

The film list filters on data-series, and episodes.html?series=plot#films opens already filtered. Update the names list in initFilter if you rename series.

Forms

The newsletter, sponsor and membership forms are front-end only. They validate and show a message that says nothing was sent. No payment is taken and nothing is stored. Connect them by replacing the submit handling in initForms with a post to your own service, such as Formspree, Netlify Forms, a mailing list or a membership platform.

Accessibility

  • Every interaction has a native control: a range input for the player, real links and buttons for the pile, radios for tiers and details for the FAQ.
  • The phone menu is a real button with aria-expanded and aria-controls. Escape closes it, focus moves in and comes back, and without JavaScript the links show in the header instead.
  • Reduced motion removes movement and shows every mark in its finished state.
  • Without JavaScript or the CDN, the pile becomes its list and the player becomes stills with a full transcript.

Dependencies and teardown

GSAP 3.15.0 with ScrollTrigger, and Lenis 1.3.17, from CDN tags on every page (GSAP floor 3.12+). Pages are plain page loads with @view-transition { navigation: auto; }, so features run on load and nothing needs tearing down between pages. Lenis can be switched off with data-smooth="off" on <html>, or compared with ?smooth=off in the URL.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.