Responsive Embeds

Aspect ratio in Player Studio

Player Studio (Media → Player) includes a built-in Aspect Ratio selector with four options:

• 16:9 — standard widescreen, the default for most video content
• 1:1 — square format, common for social-style embeds
• 9:16 — vertical/portrait format for short-form or mobile-first content
• Custom — enter an arbitrary width and height ratio

The Responsive (100%) scaling option, shown below the aspect ratio selector, makes the generated embed stretch to fill its container at any screen width. This is on by default and is the recommended setting for responsive websites. The embed code Player Studio generates already includes the correct scaling — no manual CSS is needed.

The padding-top technique (16:9)

If you've copied an embed code from Player Studio with Responsive (100%) enabled, you don't need the CSS below — the scaling is already handled. Use this section if you're working with a fixed-size embed or need manual control over the container.

Wrap your iframe in a container div and use the padding-top trick to maintain a 16:9 ratio:

<style>
.video-wrap {
  position: relative;
  padding-top: 56.25%; /* 16:9 = 9/16 */
  height: 0;
  overflow: hidden;
}
.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="video-wrap">
  <iframe src="https://player.videonest.co/v/VIDEO_ID"
    frameborder="0" allowfullscreen></iframe>
</div>

The 56.25% padding-top value equals 9÷16, locking the container to 16:9 relative to its width.

Common aspect ratio values

• 16:9 (widescreen) — padding-top: 56.25% — standard for most video
• 1:1 (square) — padding-top: 100%
• 9:16 (vertical/portrait) — padding-top: 177.78%
• Custom — calculate as (height ÷ width) × 100%

Modern CSS alternative

Modern browsers support the aspect-ratio property, which is simpler:

<style>
.video-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.video-wrap iframe {
  width: 100%;
  height: 100%;
}
</style>

Capping the max width

Without a max-width, the player stretches to fill very wide containers. Add max-width to the wrapper:

.video-wrap {
  width: 100%;
  max-width: 900px;
  margin: 0 auto; /* center it */
  aspect-ratio: 16 / 9;
}