Sizing of media elements
How different width, height, and aspect ratio parameters affect the sizing of embedded media elements like iframes, PDFs, 3D models, and videos
September 22, 2025
Samantha Monty
Chair for Human-Computer Interaction, University of Würzburg

Iframe

Parameters

Name Value
width
height
w:h

Iframe

Default aspect ratio: 16:9

Source code

## Parameters {.left}

| Name   | Value |
|--------|-------|
| width  |       |
| height |       |
| w:h    |       |

## Iframe {.right}

![Default aspect ratio: 16:9](https://tramberend.bht-berlin.de/){.iframe}

Iframe

Parameters

Name Value
width
height 200px
w:h

Iframe

Default aspect ratio: 16:9

Source code

## Parameters {.left}

| Name   | Value |
|--------|-------|
| width  |       |
| height | 200px |
| w:h    |       |

## Iframe {.right}

![Default aspect ratio: 16:9](https://tramberend.bht-berlin.de/){.iframe
height="200px"}

Iframe

Parameters

Name Value
width 72%
height
w:h

Iframe

Default aspect ratio: 16:9

Source code


## Parameters {.left}

| Name   | Value |
|--------|-------|
| width  | 72%   |
| height |       |
| w:h    |       |

## Iframe {.right}

![Default aspect ratio: 16:9](https://tramberend.bht-berlin.de/){.iframe
width="72%"}

Iframe

Parameters

Name Value
width 300px
height 300px
w:h

Iframe

Aspect ratio: 1:1

Source code

## Parameters {.left}

| Name   | Value |
|--------|-------|
| width  | 300px |
| height | 300px |
| w:h    |       |

## Iframe {.right}

![Aspect ratio: 1:1](https://tramberend.bht-berlin.de/){.iframe width="300px"
height="300px"}

Iframe

Parameters

Name Value
width 300px
height -
w:h 2/3

Iframe

Aspect ratio: 2:3

Source code

## Parameters {.left}

| Name   | Value |
|--------|-------|
| width  | 300px |
| height |  -    |
| w:h    | 2/3   |

## Iframe {.right}

![Aspect ratio: 2:3](https://tramberend.bht-berlin.de/){.iframe width="300px"
w:h="2/3"}

Iframe

Parameters

Name Value
width 300px
height 300px
w:h 3/1

Iframe

Aspect ratio: 1:1

Source code

## Parameters {.left}

| Name   | Value |
|--------|-------|
| width  | 300px |
| height | 300px |
| w:h    | 3/1   |

## Iframe {.right}

![Aspect ratio: 1:1](columns.pdf){.iframe width="300px" height="300px"
w:h="3/1"}

Iframe

Parameters

Name Value
width
height
w:h 3/2

Iframe

Aspect ratio: 3:2

Source code

## Parameters {.left}

| Name   | Value |
|--------|-------|
| width  |       |
| height |       |
| w:h    | 3/2   |

## Iframe {.right}

![Aspect ratio: 3:2](assets/teapot.off){w:h="3/2"}

Iframe

Parameters

Name Value
width
height 300px
w:h 3/2

Iframe

Aspect ratio: 3:2

Source code

## Parameters {.left}

| Name   | Value |
|--------|-------|
| width  |       |
| height | 300px |
| w:h    | 3/2   |

## Iframe {.right}

![Aspect ratio: 3:2](youtube:7XX6IEuLP3A){w:h="3/2" height="300px"}

In a row

Four anythings (web page, PDF, 3D model, YouTube) in a neatly sized row!

Source code


| ![](https://tramberend.bht-berlin.de/){.iframe w:h="2/3"}
| ![](columns.pdf){.iframe w:h="1/3"}
| ![](assets/teapot.off){w:h="1/1"}
| ![](youtube:7XX6IEuLP3A){w:h="3/2"}

Caption: Four anythings (web page, PDF, 3D model, YouTube) in a neatly sized row!