# 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: 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.