Code examples

See different AMP examples

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.

Specify custom placeholder

See below example which explains how to setup custom placeholder for your AMP player.

<amp-brid-player data-partner="264" data-player="4144" data-video="13663" layout="responsive" width="480" height="270">
  <amp-img placeholder src="https://brid.tv/wp-content/uploads/2019/08/banner_home.jpg" layout="fill" alt="Placeholder"></amp-img>
</amp-brid-player>