---
title: "Media ViewHelper <f:media>"
manual: "Fluid ViewHelper Reference"
version: "13.4"
permalink: "https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-media@13.4"
source: "Global/Media.rst"
modified: "2026-09-17T09:07:45+00:00"
---

# Media ViewHelper `<f:media>`

ViewHelper to render a given media file (audio/video/images) with the correct HTML tag.

It utilizes the `RendererRegistry` to determine the correct Renderer class. When no renderer can be resolved, it will fall back to use the default `ImageViewHelper` for regular images.

Go to the source code of this ViewHelper: [MediaViewHelper.php (GitHub)](https://github.com/TYPO3/typo3/blob/main/typo3/sysext/fluid/Classes/ViewHelpers/MediaViewHelper.php).

**Table of contents**

-   [Examples](https://docs.typo3.org/permalink/t3viewhelper:examples@13.4)
-   [Arguments of the <f:media> ViewHelper](https://docs.typo3.org/permalink/t3viewhelper:arguments-of-the-f-media-viewhelper@13.4)

## Examples

### Image object

**packages/my_extension/Resources/Private/Templates/Media/Show.fluid.html**

```html
<f:media file="{file}" width="400" height="375" />
```

**Output**

```html
<img alt="alt set in image record" src="fileadmin/_processed_/323223424.png" width="396" height="375" />
```

### MP4 video object

**packages/my_extension/Resources/Private/Templates/Media/Show.fluid.html**

```html
<f:media file="{file}" width="400" height="375" />
```

**Output**

```html
<video width="400" height="375" controls><source src="fileadmin/user_upload/my-video.mp4" type="video/mp4"></video>
```

### MP4 video object with loop and autoplay option set

**packages/my_extension/Resources/Private/Templates/Media/Show.fluid.html**

```html
<f:media file="{file}" width="400" height="375" additionalConfig="{loop: '1', autoplay: '1'}" />
```

**Output**

```html
<video width="400" height="375" controls loop><source src="fileadmin/user_upload/my-video.mp4" type="video/mp4"></video>
```

## Arguments of the `<f:media>` ViewHelper

> **Allows arbitrary arguments**
>
> This ViewHelper allows you to pass arbitrary arguments not defined below
> directly to the HTML tag created. This includes custom `data-` arguments.

-   **additionalAttributes**

    -   *Type:* array

    Additional tag attributes. They will be added directly to the resulting HTML tag.

-   **additionalConfig**

    -   *Type:* array
    -   *Default:* array (
    )

    This array can hold additional configuration that is passed though to the Renderer object

-   **aria**

    -   *Type:* array

    Additional aria-\* attributes. They will each be added with a "aria-" prefix.

-   **cropVariant**

    -   *Type:* string
    -   *Default:* 'default'

    select a cropping variant, in case multiple croppings have been specified or stored in FileReference

-   **data**

    -   *Type:* array

    Additional data-\* attributes. They will each be added with a "data-" prefix.

-   **decoding**

    -   *Type:* string

    Provides an image decoding hint to the browser. Can be "sync", "async" or "auto"

-   **file**

    -   *Type:* object
    -   *Required:* true

    File

-   **fileExtension**

    -   *Type:* string

    Custom file extension to use for images

-   **height**

    -   *Type:* string

    This can be a numeric value representing the fixed height in pixels. But you can also perform simple calculations by adding "m" or "c" to the value. See imgResource.width for possible options.

-   **loading**

    -   *Type:* string

    Native lazy-loading for images property. Can be "lazy", "eager" or "auto". Used on image files only.

-   **width**

    -   *Type:* string

    This can be a numeric value representing the fixed width of in pixels. But you can also perform simple calculations by adding "m" or "c" to the value. See imgResource.width for possible options.