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. First the amp-carousel
.
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
For an instagram video import the amp-instagram
component.
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
For a vine video import the amp-vine
component.
<script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
For a youtube video import the amp-youtube
component.
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
For a vimeo video import the amp-vimeo
component.
<script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>
For a dailymotion video import the amp-dailymotion
component.
<script async custom-element="amp-dailymotion" src="https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js"></script>
For a twitter video import the amp-twitter
component.
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
For a facebook video import the amp-facebook
component.
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
For a brightcove video import the amp-brightcove
component.
<script async custom-element="amp-brightcove" src="https://cdn.ampproject.org/v0/amp-brightcove-0.1.js"></script>
For a brid-player video import the amp-brid-player
component.
<script async custom-element="amp-brid-player" src="https://cdn.ampproject.org/v0/amp-brid-player-0.1.js"></script>
For a reach-player video import the amp-reach-player
component.
<script async custom-element="amp-reach-player" src="https://cdn.ampproject.org/v0/amp-reach-player-0.1.js"></script>
For a springboard-player video import the amp-springboard-player
component.
<script async custom-element="amp-springboard-player" src="https://cdn.ampproject.org/v0/amp-springboard-player-0.1.js"></script>
For an iframe video import the amp-iframe
component.
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
For custom video import the amp-video
component.
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
The Video Carousel
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.
<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="bpxmJaHED09"></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>
Bu sayfadaki açıklamalar tüm sorularınıza yanıt vermiyorsa, özgün kullanım durumunuzu tartışmak üzere diğer AMP kullanıcılarına ulaşmaktan çekinmeyin.
Stack Overflow'a git Açıklanmayan bir özellik mi var?AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.
Örneği GitHub'ta düzenle-
Written by @kul3r4