> 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.firework.com/firework-for-developers/web/integration-guide/components/channel-button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.