In this article, we will embed Vimeo videos into a Next.js application that uses typescript and style them with rounded borders. I chose the following videos from Vimeo’s featured page to work with:

• https://vimeo.com/468473333

• https://vimeo.com/315269363

• https://vimeo.com/747605362

To ensure the video is responsive:

• click the share button

• click show options

• Choose responsive

  • Uncheck the options ‘Intro: Portrait, Title etc’ unless you want them

the <iframe> code will originally look like this:

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/468473333?h=24da2db06b&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay"; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

In the final product, I removed:

<script src="https://player.vimeo.com/api/player.js"></script>

I also removed allfullscreen because it is already present here allow="autoplay; fullscreen; picture-in-picture" and when both are present the ability to go full screen was not there and icon was not on the video:

In my Nextjs app I am using Tailwind CSS so I added the styles using Tailwind:

style="padding:56.25% 0 0 0;position:relative;" became className="relative pt-3 h-80 lg:h-60 w-full" (Originally I added height and width to the wrapper as you see here, but that gave the container a fixed size which did not allow for border radius change and was not truly responsive. I ended up using aspect-video as you will see under the header ‘Border Radius’)

style="position:absolute;top:0;left:0;width:100%;height:100%; became className="absolute top-0 left-0 w-full h-full"

Border Radius

In order to get a custom border radius on the video I used aspect-video on the wrapper. This tutorial under ‘Update #4’ made me aware of this. I am using Tailwind styles where as the author of the article is using a CSS stylesheet.

Example from my project:

I mapped over an array called “features” and

const features = [
  {
    id: 11,
    description:
      "Commodo nec sagittis tortor mauris sed. Turpis tortor quis scelerisque diam id accumsan nullam. ",
    src:
      "https://player.vimeo.com/video/783455878?h=46672b3b96&title=0&byline=0&portrait=0",
  },
  {
    id: 12,
    description:
      "Pellentesque enim a commodo malesuada turpis eleifend risus. Facilisis donec placerat sapien.",
    src:
      "https://player.vimeo.com/video/468473333?h=24da2db06b&title=0&byline=0&portrait=0",
  },
  {
    id: 13,
    description:
      "Pellentesque sit elit congue ante nec amet. Dolor aenean curabitur viverra suspendisse iaculis.",
    src: "https://player.vimeo.com/video/315269363?h=ca06cab15c&color=a5d2ff",
  },
];

I’m using typescript, which required me to add the attribute url={""} although it is empty.

  <div className="relative pt-3 aspect-video">
    <Iframe
      src={feature.src}
      className="absolute top-0 left-0 w-full h-full rounded-2xl"
      allow="autoplay; fullscreen; picture-in-picture"
      url={""}
    ></Iframe>
  </div>

The final product on the site: