## Table of Contents

- [media](#media)

---

[API](https://microlink.io/docs/api/getting-started/overview)

[GUIDES](https://microlink.io/docs/guides) [MQL](https://microlink.io/docs/mql/getting-started/overview) [SDK](https://microlink.io/docs/sdk/getting-started/overview) [CARDS](https://microlink.io/docs/cards/getting-started/overview)

API GUIDES MQL SDK CARDS

Getting Started

[Overview](https://microlink.io/docs/sdk/getting-started/overview)

[Styling](https://microlink.io/docs/sdk/getting-started/styling)

Integrations

[Eleventy](https://github.com/daviddarnes/eleventy-plugin-unfurl)

[Hugo](https://blog.ypertex.com/articles/useful-hugo-templating)

[Jekyll](https://microlink.io/docs/sdk/integrations/jekyll)

[React](https://microlink.io/docs/sdk/integrations/react)

[Vanilla](https://microlink.io/docs/sdk/integrations/vanilla)

[Vue](https://microlink.io/docs/sdk/integrations/vue)

Query Parameters

[apiKey](https://microlink.io/docs/sdk/parameters/api-key)

[contrast](https://microlink.io/docs/sdk/parameters/contrast)

[direction](https://microlink.io/docs/sdk/parameters/direction)

[fetchData](https://microlink.io/docs/sdk/parameters/fetch-data)

[lazy](https://microlink.io/docs/sdk/parameters/lazy)

[media](https://microlink.io/docs/sdk/parameters/media)

[autoPlay](https://microlink.io/docs/sdk/parameters/media/auto-play)

[controls](https://microlink.io/docs/sdk/parameters/media/controls)

[muted](https://microlink.io/docs/sdk/parameters/media/muted)

[loop](https://microlink.io/docs/sdk/parameters/media/loop)

[mediaRef](https://microlink.io/docs/sdk/parameters/media-ref)

[setData](https://microlink.io/docs/sdk/parameters/set-data)

[size](https://microlink.io/docs/sdk/parameters/size)

[url](https://microlink.io/docs/sdk/parameters/url)

API GUIDES MQL SDK CARDS

Getting Started

[Overview](https://microlink.io/docs/sdk/getting-started/overview)

[Styling](https://microlink.io/docs/sdk/getting-started/styling)

Integrations

[Eleventy](https://github.com/daviddarnes/eleventy-plugin-unfurl)

[Hugo](https://blog.ypertex.com/articles/useful-hugo-templating)

[Jekyll](https://microlink.io/docs/sdk/integrations/jekyll)

[React](https://microlink.io/docs/sdk/integrations/react)

[Vanilla](https://microlink.io/docs/sdk/integrations/vanilla)

[Vue](https://microlink.io/docs/sdk/integrations/vue)

Query Parameters

[apiKey](https://microlink.io/docs/sdk/parameters/api-key)

[contrast](https://microlink.io/docs/sdk/parameters/contrast)

[direction](https://microlink.io/docs/sdk/parameters/direction)

[fetchData](https://microlink.io/docs/sdk/parameters/fetch-data)

[lazy](https://microlink.io/docs/sdk/parameters/lazy)

[media](https://microlink.io/docs/sdk/parameters/media)

[autoPlay](https://microlink.io/docs/sdk/parameters/media/auto-play)

[controls](https://microlink.io/docs/sdk/parameters/media/controls)

[muted](https://microlink.io/docs/sdk/parameters/media/muted)

[loop](https://microlink.io/docs/sdk/parameters/media/loop)

[mediaRef](https://microlink.io/docs/sdk/parameters/media-ref)

[setData](https://microlink.io/docs/sdk/parameters/set-data)

[size](https://microlink.io/docs/sdk/parameters/size)

[url](https://microlink.io/docs/sdk/parameters/url)

## media

[Copy for LLM](https://microlink.io/docs/sdk/parameters/media.md "Copy content for LLM")

\|

[View as Markdown](https://microlink.io/docs/sdk/parameters/media.md "View content as Markdown")

Type:

\<string\> \| \<string\[\]\>

\
Default: \[ 'image', 'logo' \]\
Values:

'audio' \| 'iframe' \| 'image' \| 'logo' \| 'screenshot' \| 'video'

Determines the field to use as the media of the card.

- React

- Vue

- Jekyll

- Vanilla

```
<template>

  <Microlink

    url="https://www.youtube.com/watch?v=9P6rdqiybaw"

    :media="['image', 'logo']"

  />

</template>
```

The default value is a collection of fields, meaning that the first valid value will be used as the image of the card.

You can also pass a single value to be used instead, for example 'logo'

- React

- Vue

- Jekyll

- Vanilla

```
<template>

  <Microlink

    url="https://www.youtube.com/watch?v=9P6rdqiybaw"

    media="logo"

  />

</template>
```

The detection of 'video' is also supported

- React

- Vue

- Jekyll

- Vanilla

```
<template>

  <Microlink

    url="https://www.youtube.com/watch?v=9P6rdqiybaw"

    media="video"

  />

</template>
```

Also for 'audio'

- React

- Vue

- Jekyll

- Vanilla

```
<template>

  <Microlink

    url="https://open.spotify.com/track/1W2919zs8SBCLTrOB1ftQT"

    media="audio"

  />

</template>
```

Even 'iframe'

- React

- Vue

- Jekyll

- Vanilla

```
<template>

  <Microlink

    url="https://www.youtube.com/watch?v=9P6rdqiybaw"

    media="iframe"

  />

</template>
```

Last updated on January 10, 2026

[Edit on GitHub](https://github.com/microlinkhq/www/blob/master/src/content/docs/sdk/parameters/media/index.md)