> For the complete documentation index, see [llms.txt](https://docs.firework.com/firework-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.firework.com/firework-for-developers/web/integration-guide/components/channel-button.md).

# Floating Player

Player widget allows for embeddable video placement anywhere on your page. Two additional mode allows "pinned" and "fullscreen" initial layout.

<div align="left" data-full-width="false"><figure><img src="https://business.firework.com/floatingvideo_embed.gif" alt=""><figcaption><p>Floating video</p></figcaption></figure></div>

{% hint style="info" %}
Using vertical videos exclusively? See also [Storyblock](/firework-for-developers/web/integration-guide/components/storyblock.md).
{% endhint %}

## Integration

{% tabs %}
{% tab title="HTML" %}

```markup
<script async src="//asset.fwcdn3.com/js/fwn.js" type="text/javascript"></script>
```

```markup
<fw-player
    channel="my-channel"
    style="width: 100%; aspect-ratio: 16/9"
></fw-player>
```

{% endtab %}
{% endtabs %}

## Attributes

### width

Specifies explicit width. Defaults to 100%.

### height

Explicit height. Defaults to 100%.

### style

CSS style to allow for setting width, height and aspect-ratio as well.

### mode

`pinned | fullscreen`

Additional modes for floating (mimimized) or fullscreen initial layouts.

### dock

`true | false`

For pinning to the bottom as user scrolls past by.

### player\_margin

CSS string to specify mimimized player distance from the edges. For positioning, see `player_placement`.

### player\_placement

`top-left | top-right | bottom-right | bottom-left`

Position of the mimimized video player. Defaults to `bottom-right`

See additional player attributes which are common for all widgets.

{% content-ref url="/pages/hCu85MfBVy8Jvk4slm0F" %}
[Configuration](/firework-for-developers/web/integration-guide/player/player-attributes.md)
{% endcontent-ref %}