[nextjs-notion-starter-kit] Fix embedded video overflows

by Andrew N.T.

Hero image

Photo by Nadir sYzYgY

Table of Contents

  1. Context
  2. Solving the issue
  3. Ending note

Context

Repo nextjs-notion-starter-kit. This is a template for connecting Notion and Next.js. Such a wonderful combination of Notion's unmatched editor experience and Next.js's highly optimized performance.

Issue #162. During my personal usage, I noticed that embedded videos overflowed their text container.

PR #175

Solving the issue

It was a CSS problem, so I played around with the rules until it was fixed. My hunch was the width of those videos weren't specified, so they just went with their intrinsic dimensions.

I was a bit concerned because the project didn't scope any CSS, so I had to make the additional rule as specific as possible, avoided breaking any other rules. I tested quite a few scenarios, and it was perfect on desktop or mobile.

Ending note

My favorite point of this PR was that I fixed it on my forked repo, and I thought others would benefit from the fix as well. That was the foundation of open source.