Sticky AMP player

See example below on how to set a Brid player to have sticky features under Google AMP pages.

<amp-brid-player
      dock
      data-partner="<YOUR SITE ID>"
      data-player="<YOUR PLAYER ID>"
      data-video="<YOUR VIDEO ID>"
      layout="responsive"
      width="640" height="360">
  </amp-brid-player>

Make sure that on your AMP pages you have the following scripts present for this feature to work:

<script type='text/javascript' src='https://cdn.ampproject.org/v0/amp-brid-player-0.1.js' async custom-element="amp-brid-player"></script>
<script type='text/javascript' src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js" async custom-element="amp-video-docking"></script>

Due to various Google AMP limitations, sticky functionality can only work in the following triggering conditions. Note that the video won't be docked unless it's playing manually. This means:

  • If the video has autoplay, the feature will not be triggered unless the user clicks on the video first.
  • If the video does not have autoplay, the feature will not be triggered unless the user plays the video.
  • If the video is paused while scrolling, it will not be docked.

Reference: Amp project video docking

See more official examples of the Brid player using the AMP docking component here.