Picture in Picture

Showcases the ability to keep a minimized player in the corner of your
screen even when you scroll too far


Keep the Bitmovin Player visible to users in any case. Simply scroll down to see the picture in picture feature in action.



This is where the player will return when you scroll back up

Setup

The following steps will lead you through an example implementation:

Set up the player:

var resizeTimeout = -1;
var conf = {
  key: '<YOUR PLAYER KEY HERE>',
  events: {
    playerresized: function (ev) {
      /**
       * when the player switches from minimized to full size, update the container size to prevent the page
       * from jumping when scrolling up
       * work with a timeout as the resize event is triggered periodically and when resizing back to the original size,
       * the first few events will have a smaller size as the player is gradually growing.
       */
      if (
        !$('.player-switch').hasClass('fixed-player')
      ) {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function () {
            $('.player-container'
            ).height(ev.height.substr(0, ev.height.indexOf('px')) - 2);
          },
          250
        )
        ;
      }
    }
  }
};

var source = {
  dash: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
  hls: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
  progressive: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
  poster: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/poster.jpg',
};

var playerContainer = document.getElementById('player-container');
var player = new bitmovin.player.Player(playerContainer, conf);

player.load(source).then(function () {
  var container = $('.player-container');
  var playerHeight = $('#player').height();

  /* necessary if page is refreshed in scrolled state
     keep the page from jumping, adjust the player container to match the biggest size of the player */
  if (container.height() <= playerHeight) {
    container.height(playerHeight);
  }
});

React to the scrolling of the document:

function adjustPlayer() {
  const container = $('.player-container');

  /* extract constants for better readabilty */
  const lowerEdge = container.offset().top + container.height();
  const switchToMinPlayerPos = lowerEdge - (window.innerHeight / 3);
  const currentScrollPos = document.body.scrollTop || document.documentElement.scrollTop;

  /* toggle the css-class responsible for the player moving to the lower right corner */
  if (currentScrollPos > switchToMinPlayerPos) {
    $('.player-switch').addClass('fixed-player');
  } else {
    $('.player-switch').removeClass('fixed-player');
  }
}

/* listen to scrolling events */
window.onscroll = adjustPlayer;

Adjust player size and position via CSS

.player-container {
    background: #777;
    position: relative;
}

#player {
    position: absolute;
    bottom: 0;
    right: 0;
    transition: 0.3s;
    width: 100%;
}

.player-switch.fixed-player #player {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 30vw;
    min-width: 250px;
    height: auto;
    /* make sure the player is OVER the
    code snippet and the other player*/
    z-index: 2;

    transition: 0.3s;
}

Ready to get started?

Access your free account today by signing up for a trial