How to Create a Vertical Video Player from a Vimeo Embed Code

Vimeo doesn't offer a built-in vertical embed option, but you can easily transform any standard Vimeo embed into a 9:16 vertical player using custom CSS. This approach gives you full control over the player's dimensions while maintaining the responsive functionality of Vimeo's iframe embed.

Understanding the Process

The technique involves two straightforward steps: obtaining Vimeo's standard embed code and then applying CSS to force the player into a vertical aspect ratio. This method works across all modern browsers and maintains video quality without requiring any special Vimeo account settings.

Step 1: Get the Default Embed Code from Vimeo

Start by retrieving the standard embed code from your Vimeo video:

1. Navigate to the video you want to embed on Vimeo
2. Click the Share button (usually found below or beside the video player)
3. Select the Embed option from the sharing menu
4. A pop-up window will display the <iframe> embed code
5. Copy this code to your clipboard

The code you receive will look similar to this:

<iframe src="https://player.vimeo.com/video/123456789?h=a1b2c3d4e5" 
frameborder="0" allow="autoplay; fullscreen; picture-in-picture" 
allowfullscreen></iframe>

Step 2: Add Custom CSS to Enforce the Vertical Ratio

Once you have the embed code, you'll need to apply CSS styling to create the vertical format. The most effective approach uses a wrapper container combined with the modern aspect-ratio property.

HTML Structure

Wrap your Vimeo iframe inside a container div and apply a custom class:

<div class="vimeo-vertical-wrapper">
  <iframe
    src="https://player.vimeo.com/video/123456789?h=a1b2c3d4e5"
    frameborder="0"
    allow="autoplay; fullscreen; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

CSS Styling

Add this CSS rule to your website's stylesheet:

.vimeo-vertical-wrapper iframe {
  aspect-ratio: 9/16;
  width: 100%;
  height: auto;
}

This CSS accomplishes three things. The aspect-ratio: 9/16 property forces the player into vertical dimensions. The width: 100% setting makes the player responsive to its container width. The height: auto declaration allows the browser to automatically calculate the correct height based on the aspect ratio.

Alternative Method for Older Browsers

If you need to support browsers that don't recognize the aspect-ratio property, you can use the padding-bottom technique:

.vimeo-vertical-wrapper {
  position: relative;
  padding-bottom: 177.78%; /* 16/9 * 100 for vertical ratio */
  height: 0;
  overflow: hidden;
}

.vimeo-vertical-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Customizing the Width

If you want to set a specific width rather than making the player fully responsive, simply replace width: 100% with a fixed value:

.vimeo-vertical-wrapper iframe {
  aspect-ratio: 9/16;
  width: 400px;
  height: auto;
}

This approach gives you a vertical Vimeo player that maintains proper proportions while working seamlessly across different devices and screen sizes.