Click-to-play overlay for amp-video
Introduction
Click-to-play is a common UX feature for video players on the web.
Initially displayed on top of the video, the overlay contains details about the video such as title, duration, poster image, links and a play icon.
amp-video
supports the standard play
AMP action, allowing you to implement click-to-play easily.
Setup
Import the amp-video
component.
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Styling
Custom styles for click-to-play overlay
<style amp-custom>
/* Wrapper that hosts the video and the overlay */
.video-player {
position: relative;
overflow: hidden;
}
/* Overlay fills the parent and sits on top of the video */
.click-to-play-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.poster-image {
position: absolute;
z-index: 1;
}
.poster-image img {
object-fit: cover;
}
.video-title {
position: absolute;
z-index: 2;
/* Align to the top left */
top: 0;
left: 0;
font-size: 1.3em;
background-color: rgba(0,0,0,0.8);
color: #fafafa;
padding: 0.5rem;
margin: 0px;
}
.play-icon {
position: absolute;
z-index: 2;
width: 100px;
height: 100px;
background-image: url(https://amp.dev/static/samples/img/play-icon.png);
background-repeat: no-repeat;
background-size: 100% 100%;
/* Align to the middle */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
opacity: 0.9;
}
.play-icon:hover, .play-icon:focus {
opacity: 1;
}
</style>
Markup
The overlay is an absolutely positioned div
that sits on top of the amp-video
element and fills the parent player container. It hosts the poster image, video title and a play icon.
Play icon uses play
and hide
AMP actions to hide the overlay and play the video when it is tapped.
<div class="video-player">
<amp-video id="myVideo" controls width="1280" height="720" layout="responsive" src="/static/samples/video/bullfinch.mp4">
</amp-video>
<div id="myOverlay" class="click-to-play-overlay">
<h3 class="video-title">Title of the video</h3>
<div class="play-icon" role="button" tabindex="0" on="tap:myOverlay.hide, myVideo.play"></div>
<amp-img class="poster-image" layout="fill" src="/static/samples/img/bullfinch_poster.jpg"></amp-img>
</div>
</div>
إذا لم تكن الإيضاحات الموجودة في هذه الصفحة تُجيب على جميع أسئلتك، فلا تتردد في التواصل مع مستخدمي AMP الآخرين لمناقشة حالة الاستخدام المحددة لديك بالضبط.
الذهاب إلى Stack Overflow هل هي ميزة غير موضحة؟يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.
تعديل العينة على GitHub-
Written by @aghassemi