AMP
  • websites

Video Carousels with amp-carousel

Introduction

The amp-carousel component works not only great for image galleries, but also for video galleries. The challenge when implementing a video gallery is to make sure that all videos fit into the carousel. This sample shows how to implement a massive video carousel using many of the available AMP video integrations.

Setup

Import all AMP video components.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Display a list of videos as slides. For more info about amp-carousel take a look here.

Each AMP video component specifies the aspect ratio using the width and height attributes while the responsive layout takes care of filling the carousel. Some video components are not centered by default in the carousel, we use a CSS flex layout to fix this.

Your browser doesn't support HTML5 video.

<amp-carousel width="450"
  height="450"
  layout="responsive"
  type="slides">
  <amp-video width="480"
    height="270"
    src="/static/samples/video/tokyo.mp4"
    poster="/static/samples/img/tokyo.jpg"
    layout="responsive"
    controls>
    <div fallback>
      <p>Your browser doesn't support HTML5 video.</p>
    </div>
  </amp-video>
  <amp-brid-player data-partner="264"
    data-player="4144"
    data-video="13663"
    layout="responsive"
    width="480"
    height="270"></amp-brid-player>
  <amp-brightcove data-account="906043040001"
    data-video-id="1401169490001"
    data-player-id="180a5658-8be8-4f33-8eba-d562ab41b40c"
    layout="responsive"
    width="400"
    height="300">
  </amp-brightcove>
  <amp-dailymotion data-videoid="x3rdtfy"
    layout="responsive"
    data-ui-highlight="FF4081"
    width="480"
    height="270"></amp-dailymotion>
  <div>
    <div class="amp-video-container">
      <amp-facebook class="amp-video"
        width="552"
        height="574"
        layout="responsive"
        data-embed-as="video"
        data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
      </amp-facebook>
    </div>
  </div>
  <amp-instagram data-shortcode="BCtYW7mhRV8"
    width="1"
    height="1"
    layout="responsive"></amp-instagram>
  <div>
    <div class="amp-video-container">
      <amp-reach-player class="amp-video"
        data-embed-id="default"
        layout="responsive"
        width="560"
        height="315"></amp-reach-player>
    </div>
  </div>
  <amp-springboard-player data-site-id="261"
    data-mode="video"
    data-content-id="1578473"
    data-player-id="test401"
    data-domain="test.com"
    data-items="10"
    layout="responsive"
    width="480"
    height="270">
  </amp-springboard-player>
  <amp-twitter width="375"
    height="472"
    layout="responsive"
    data-tweetid="707569406105092096"></amp-twitter>
  <amp-vimeo data-videoid="27246366"
    width="500"
    height="281"></amp-vimeo>
  <amp-vine width="400"
    height="300"
    layout="responsive"
    data-vineid="MdKjXez002d"></amp-vine>
  <amp-youtube height="270"
    layout="fixed-height"
    data-videoid="SOx1XfOjJPI"></amp-youtube>
  <amp-iframe title="Video of Sintel, an independently produced short film"
    width="400"
    height="300"
    layout="responsive"
    sandbox="allow-scripts allow-same-origin allow-popups"
    allowfullscreen
    frameborder="0"
    src="https://player.ooyala.com/iframe.html?ec=Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ&pbid=6440813504804d76ba35c8c787a4b33c&platform=html5">
  </amp-iframe>
</amp-carousel>
Need further explanation?

If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.

Go to Stack Overflow
An unexplained feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Edit sample on GitHub