# Float-on-Scroll plugin

This plugin provides float-on-scroll functionality for Wowza Flowplayer. When a user scrolls past the main player on a page, the default behavior forces the player container to pop out to a fixed position. Media playback continues in the floating, popped-out container. If the user scrolls back to the main player, the floating container disappears, and playback resumes in the main player element.

Info
The Float-on-Scroll plugin does not work inside an `<iframe>` element.

To see the Float-on-Scroll plugin in action, you can view this demo.

## Before you start

Before you use this plugin with the standalone player, we recommend the following steps:

* Read about [embedding the core player](/docs/wowza-flowplayer/player/embed/embed-with-standalone/) in your site by adding the minimum CSS and JavaScript player components.
* Make sure you have a player token. For more, see [Token configuration](/docs/wowza-flowplayer/player/configure/#token-configuration). Tokens aren't needed for local development.
* The instructions on this page generally assume you're using the Wowza Flowplayer CDN to embed the player in your site. If you're using npm, see our [npm instructions](/docs/wowza-flowplayer/player/embed/embed-with-standalone/#use-npm) or our [TypeScript guide](/docs/wowza-flowplayer/guides/add-the-player-using-typescript/).


## Install the plugin

You can load the Float-on-Scroll plugin next to the core player and any other plugins you would like to use:


```html
<!-- Load standard player skin -->
<link rel="stylesheet" href="https://cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
<!-- Load player script -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>

<!-- Load plugin -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/float-on-scroll.min.js"></script>
```


```js
// Import player library and basic CSS for player
import flowplayer from "@flowplayer/player";
import "@flowplayer/player/flowplayer.css";

// Import plugin
import FloatOnScroll from "@flowplayer/player/plugins/float-on-scroll";
```

## Add HTML elements

embed
## Configure the plugin

There are no mandatory configuration options for the Float-on-Scroll plugin. You can just load the plugin to activate it. The following properties allow you to manage the default behavior for the Float-on-Scroll plugin.

| Property | Description |
|  --- | --- |
| `float_on_scroll`  *boolean* | Default value is `true`. When `false`, disables the Float-on-Scroll feature for selected players. |
| `float_default`  *boolean* | Default value is `true`. When `false`, disables the default behavior for the Float-on-Scroll plugin. By default, the player container pops out to a fixed position on the page when a user scrolls past the main player container. The fixed container pops back in when the user scrolls past the main player position. |


Info
When using `multiplay`, the Float-on-Scroll feature is automatically disabled to prevent UI inconsistencies caused by multiple players floating at the same time. Optionally, you can disable the plugin for selected players.

#### Example

As an example, use the following code snippets when implementing and working with the Float-on-Scroll plugin.


```html
<!-- Set up the plugin and player container -->
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/float-on-scroll.min.js"></script>

<div id="player"></div>
```


```js
// Initialize and configure the player
<script>
  const player = flowplayer("#player", {
      src: "//edge.flowplayer.org/bauhaus.m3u8",
      // Add your player token
      token: "[my-player-token]",
      float_on_scroll: true
  });
</script>
```

## Listen to plugin events

This section describes the events you can capture to control and manage the floating behavior of the player. To understand event handling differences between CDN or npm implementations, see [Plugin events](/docs/wowza-flowplayer/plugins/about-plugins/#plugin-events).

| CDN event | npm event | Description |
|  --- | --- | --- |
| `flowplayer.float_on_scroll.events.EXT_BTN_CLICK` | `FloatOnScroll.events.EXT_BTN_CLICK` | Emitted when a user clicks to exit the floating player. By default when exiting the, when a user clicks to exit the floating player, the floating container pops back in and media playback is paused in the main player container. |
| `flowplayer.float_on_scroll.events.POP_OUT` | `FloatOnScroll.events.POP_OUT` | Emitted when the player pops out from the main player container to a fixed position on the page. |
| `flowplayer.float_on_scroll.events.POP_IN` | `FloatOnScroll.events.POP_IN` | Emitted when the player pops back in from a fixed position to the main player container on the page. |


#### Example

The following example sets up an event listener to capture when the player pops back in from a fixed position to the main player container on the page.


```js
player.on(flowplayer.float_on_scroll.events.POP_IN, () => console.log("Player popped in!"))
```


```js
player.on(FloatOnScroll.events.POP_IN, () => console.log("Player popped in!"))
```

## Control floating behavior

The methods described in this section allow you to trigger and control the floating behavior of the player.

| Method | Description |
|  --- | --- |
| `popIn()` | Use to revert the player from its fixed, popped-out position and into the main player on the page. |
| `popOut()` | Use to pop out the player from the main player position to a fixed, popped-out state. |


## Advanced usage

### Configure multiple players

If you plan on using the Float-on-Scroll plugin with multiple players on a page, you must specify which player should float. Only one of the players in this scenario can have the `float_on_scroll` property set to `true`. When this preference isn't explicitly set, the first initialized player floats by default. For an example, see this sample configuration:


```js
const player1 = flowplayer("#player_1", {
  src: "videos.example.com/your_content.m3u8",
  float_on_scroll: false
})

const player2 = flowplayer("#player_2", {
  src: "videos.example.com/your_content.m3u8",
  float_on_scroll: true
})
```