North&Grain | Dynamic Video CMS Template Development in Framer by Georgia TsiouliNorth&Grain | Dynamic Video CMS Template Development in Framer by Georgia Tsiouli
Built with Framer

North&Grain | Dynamic Video CMS Template Development in Framer

Georgia Tsiouli

Georgia Tsiouli

North&Grain | Building a multi-format video system in Framer's CMS


Overview

A video production studio needed their portfolio pages to handle the way they actually work. Their work is a mix of 16:9 films, vertical reels, YouTube links and uploaded MP4 files, and many projects involve several videos rather than one.
The brief was to make the project template flexible enough to cover all of that, and to keep every part of it editable from the CMS so the studio never has to open the canvas.

Goals

One project template that displays both landscape and vertical videos at appropriate sizes
Support for multiple videos per project, playing in the same window rather than opening a new page
Flexible image counts on News entries (1, 3 or 5) instead of a fixed grid
Every option controlled through CMS toggles, no developer needed
Full mobile and tablet responsiveness
The video below shows how the template handled reels and 16:9 videos, a unified layout, before conditional CMS.
Before

Challenges

Framer allows one template per CMS collection. That single constraint shaped the whole project: four different video cases (16:9 MP4, 16:9 YouTube, vertical MP4, YouTube Short) all had to live inside the same layout and adapt themselves.
A few things followed from it:
Framer supports conditional padding and gap, but not conditional width, so the container had to stay flexible enough to host a 16:9 video while still looking right around a vertical one.
A YouTube embed and Framer's native video element are two different players. They report different dimensions and cannot be made to match by resizing alone.
Standardising on MP4 would have solved the sizing problem, but Framer caps uploads at 50MB and the quality loss was not acceptable for a production studio's showreel.
Framer's version history is limited, so every experiment had to be reversible by hand. I kept original values documented before changing anything.

What I built

Conditional layout via CMS toggles. "Is Reel" switches the project page to a split layout with the video on one side and the text on the other. "Is 16:9" handles the orientation of Vimeo embdeds. The studio picks the format per project and the page adjusts itself.
A unified video player across all two cases, with dimensions tuned so reels and landscape videos read as part of the same system rather than four separate treatments.
Conditional News layouts with fields that appear only when a third or fifth image exists.
Alongside the brief: fixed a broken video source, a typo, text overflow issues, and two stray service items appearing under the footer on tablet.

Outcome

The studio can now publish any project in any format from the CMS alone. Reels and landscape videos sit consistently within the same template, and News entries are no longer locked to one image count.
We also moved all videos into Vimeo to better control the new player's layout, and configured the appropriate settings to make these videos embeddable yet private.
The video below demonstrates the new player.
New player

What I would tell another client

Template-based builds have real limits, and the honest work is finding out where they are early rather than fighting them. Most of the value here came from mapping which parts of the layout could be made conditional and which could not, then designing around that instead of around an ideal that Framer was never going to reach.
Like this project

Posted Jul 28, 2026

Built a flexible CMS template for dynamic video handling in Framer. The template supports multiple video types and formats and is editable through the CMS.

Likes

0

Views

1

Timeline

Jul 22, 2026 - Jul 27, 2026