Floating

The floating object defines how the player behaves when its embedded position scrolls out of view.

When floating is enabled, the player transitions into a persistent, on-screen state that allows playback to continue while viewers navigate the page. Floating behavior can be configured to control when it activates, whether it can be dismissed, and how it appears across devices.

🚧
The floating object cannot be used with a player that is embedded in an iframe.

Models

The player supports two floating configuration models.

Model	Description
Enhanced	Provides granular, device-specific control over floating behavior across desktop, tablet, and phone (mobile) This model supports: Enabling or disabling floating independently per device Configuring floating position (for example, `bottom-right` or `pinned-to-top`) Controlling close button behavior per device We strongly recommend this model for new implementations.
Legacy	Applies a single, global floating configuration across all devices This model supports: Enabling floating behavior Controlling when floating activates (`mode`) Allowing or preventing dismissal (`dismissible`) Displaying the video title in the close bar (`showTitle`) This model is maintained for backward compatibility.

Both models maintain the same core behavior: the player begins floating when it leaves the viewport and returns to its embedded position when it re-enters view (unless otherwise configured).

Enhanced model

jwplayer("myElement").setup({
  "playlist": "https://cdn.jwplayer.com/v2/playlists/{playlist_id}",
  "floating": {
    "devices": {
      "desktop": {
        "enabled": true,
        "position": "bottom-right",
        "closeButtonMode": "always"
      },
      "tablet": {
        "enabled": false
      },
      "mobile": {
        "enabled": true,
        "position": "pinned-to-top",
        "closeButtonMode": "on-hover"
      }
    },
    "enableNewDesign": true
  }
});

Property	Description
devices * object	(Required) Device-specific floating player customizations Supported device objects: `desktop` `tablet` `mobile` See: devices.{device}
enableNewDesign * boolean	(Required) Enables the enhanced floating configuration model Possible values: `true`: Begins floating when the player scrolls out of the visible screen area and stops floating when the player scrolls back into view `false`: Disables the floating player

devices.{device}

Property	Description
enabled * boolean	(Required) Enables floating behavior for the specified device Possible values: `true`: Begins floating when the player scrolls out of the visible screen area and stops floating when the player scrolls back into view `false`: Disables the floating player
closeButtonMode string	Permits or prohibits closing the floating player Possible values: `always` `after-first-ad` `off` `on-hover`
position string	Sets the location of the floating player when the main player scrolls out of the visible screen area Possible values: `bottom-right` `pinned-to-top` (Mobile only)

Legacy model

jwplayer("myElement").setup({
  "playlist": "https://cdn.jwplayer.com/v2/playlists/{playlist_id}",
  "floating": {
    "mode": "notVisible",
    "dismissible": true,
    "showTitle": false
  }
});

Property	Description
dismissible boolean	Permits or prohibits closing the floating player Possible values: `true`: (Default) Viewer can close the floating player `false`: Viewer cannot close the floating player
mode ^{< 8.17.0+} string	Tells the player how the floating behavior should operate Possible values: `notVisible`: (Default) Begins floating when the player scrolls out of the visible screen area and stops floating when the player scrolls back into view `always`: Always float the player `never`: Never float the player
showTitle boolean	Determines if the video title is displayed with the floating player close (X) button Possible values: `false`: (Default) The video title is not displayed on the external close bar. `true`: The video title is displayed on the external close bar.

💡
By default, adding an empty floating object enables the floating player functionality and also sets "dismissible": true.

Additional customizations

In addition to object-level configuration, floating behavior can be further customized through CSS and API methods. These options provide additional control over styling and activation timing.

Feature	Description
CSS customization	Use the following CSS classes to customize the floating player: .jw-flag-floating .jw-wrapper .jw-float-icon
Custom timing	Use the floating API method to create custom floating timing.