# Floating Player Modes

The Backtracks Player's floating modes, which integrate directly with the Apple platform, enables podcast publishers to deliver breakthrough listening experiences. The player appears on screen with the publisher’s branding while allowing the user to navigate wtihin the publisher site or outside of it with an uninterrupted and consistent audio experience, as the player floats above and outside the browser window and even above apps as part of the desktop or homescreen. Learn more about floating modes here.

<html>
 <div>
    Here is an example of a Backtracks Player with on-site and off-site floating modes enabled.
  </div>

  <div id="backtracks-player" style="max-width: 100%" 
      data-bt-embed="https://player.backtracks.fm/backtracks/backtracks/m/player-example"
      data-bt-show-description="true"
      data-bt-floating-mode="auto"
      data-bt-floating-mode-position="bottomright"
      data-bt-floating-mode-z-index="10"
  ></div>

  <style>
    .popup {
      position: fixed;
      z-index: 20;
      top: 5vh;
      height: 90vh;
      background-color: white;
      left: 5vw;
      width: 90vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-radius: 10px;
      box-shadow: 0 10px 10px -10px rgba(0,0,0,0.8);
    }

    button {
      border-radius: 5px;
    }
  </style>

  <button id="modeauto">Auto mode</button>
  <button id="modemanual">Manual mode</button>
  <button id="manualfloat">float() (manual only)</button>
  <button id="manualunfloat">unfloat() (manual only)</button>
  <button id="openpopup">Test z-index</button>

  <div class="popup" id="popup" style="display:none">
    This popup has z-index=20 and floating mode should have z-index=10
    <button id="closepopup">Close this</button>
  </div>


  <div style="height: 5vh;"></div>
</html>

<script>
(function(p,l,a,y,s){if(p[a])return
if(p[y])return p[y]();s=l.createElement('script')
l.head.appendChild((s.async=p[a]=true,
s.src='https://player.backtracks.fm/embedder.js',
s))}(window,document,'__btL','__btR'));
window.onBacktracksLoad = function (BT) {
  var player = BT.getAll()[0]

  function styleActive (elm) {
    elm.style.backgroundColor = '#2edbad'
  }

  function styleInactive (elm) {
    elm.style.backgroundColor = '#fff'
  }

  styleInactive(window.modeauto)
  styleInactive(window.modemanual)
  styleInactive(window.manualfloat)
  styleInactive(window.manualunfloat)
  styleInactive(window.openpopup)
  styleInactive(window.closepopup)

  setInterval(() => {
    var mode = player.get('floatingMode')
    if (mode === 'auto') {
      styleActive(window.modeauto)
      styleInactive(window.modemanual)
    } else if (mode === 'manual') {
      styleInactive(window.modeauto)
      styleActive(window.modemanual)
    }
  }, 200)

  window.modeauto.addEventListener('click', () => {
    player.set({ floatingMode: 'auto' })
  })
  window.modemanual.addEventListener('click', () => {
    player.set({ floatingMode: 'manual' })
  })
  window.manualfloat.addEventListener('click', () => {
    player.float()
  })
  window.manualunfloat.addEventListener('click', () => {
    player.unfloat()
  })
  window.openpopup.addEventListener('click', () => {
    window.popup.style.display = 'flex'
  })
  window.closepopup.addEventListener('click', () => {
    window.popup.style.display = 'none'
  })
}
</script>

TIP

The settings to allow floating modes may only be set by users on paid plans. The settings to allow on-site or off-site floating modes may be individually set in the player embed defaults and settings in the admin UI. If you would like to learn more about our paid plans, contact us.

# On-Site Floating Player

In onsite enabled mode, the Backtracks Player adjusts with the listener while they scroll on the same page, as well as an offsite floating mode, allowing listeners to navigate between pages and sites without missing a beat or word of the story.

Scroll down, past the Backtracks Player, in the example in this docmentation page to see the on-site floating player in a default configuration. The on-site floating player mode allows a Backtracks Player to:

Automatically float on the page (in a position of your choosing on the page) when the Backtracks Player is not in the viewport or screen of the user and back to the original player when the user navigates to the embed location of the original player
Manually float (in a position of your choosing on the page) or unfloat the Backtracks Player on the page

# Set On-Site Floating Player Options

The Backtracks Player supports the player options similar to setting startTime, primaryColor, etc. to control the settings related to on-site floating mode:

Setting	Type	Description
floatingMode	string	auto or manual
floatingModePosition	string	topleft, topright, bottomleft, or bottomright
floatingModeWidth	number	width of the player in pixels/px for on-site floating mode
floatingModeZIndex	number	`z-index` of the player with other elements on a page for on-site floating mode

TIP

The Backtracks Player floating modes may be enabled or disabled on paid plans.

# Off-Site Enabled Floating Player

In offsite enabled mode, which integrated directly with the Apple platform, the player appears on screen with the publisher's branding while allowing the user to navigate to other sites and have an uninterrupted and consistent audio experience, as it floats above and outside the browser window and even above apps on iOS devices as part of the homescreen, desktop, etc.

TIP

To experience off-site floating, start playing the audio then the float capability will appear in the player when supported by the playback environment.

← Internationalization or i18n Customizing the Player's Look & Feel →