Design Atlas
한국어
◧ Film & photo

Video call to action

영상 CTA (구독·좋아요 유도)

A spoken line or on-screen element that asks viewers to act — subscribe, like, comment — from inside the video.

Also known as: Subscribe CTALike & subscribeEngagement prompt구독 좋아요 알림설정
···
html
<div class="vid">
  <div class="lbl">핵심 정보를 준 직후</div>
  <div class="cta"><span class="btn">구독</span><span class="like">♥</span></div>
  <div class="bar"><i></i></div></div>
css
.vid{position:relative;width:min(92%,170vmin*1.3);aspect-ratio:16/9;max-height:92%;border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,#232b55,#0e1226);border:1px solid var(--line);font-family:sans-serif;color:#fff}
.bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.2)}
.bar i{display:block;height:100%;background:#ff3d57;width:0;animation:prog 6s linear infinite}
@keyframes prog{0%{width:0}100%{width:100%}}
.lbl{position:absolute;top:8%;left:5%;font:600 clamp(8px,3vmin,13px) sans-serif;color:#cfd3ee}
.cta{position:absolute;right:6%;bottom:14%;display:flex;align-items:center;gap:8px;animation:cta 6s ease infinite}
.btn{background:#ff3d57;color:#fff;font:800 clamp(10px,3.6vmin,16px) sans-serif;padding:6px 14px;border-radius:99px;animation:press 6s ease infinite}
.like{font-size:clamp(14px,5vmin,24px);color:#fff;animation:heart 6s ease infinite}
@keyframes cta{0%,30%{opacity:0;transform:translateY(14px)}38%,75%{opacity:1;transform:translateY(0)}85%,100%{opacity:0}}
@keyframes press{0%,52%{transform:scale(1);background:#ff3d57}56%{transform:scale(.88)}62%,100%{transform:scale(1);background:#555}}
@keyframes heart{0%,58%{color:#fff;transform:scale(1)}66%{color:#ff3d57;transform:scale(1.5)}75%,100%{color:#ff3d57;transform:scale(1)}}
···

Video hook훅 (후킹)

A device in the first 3–5 seconds that gives viewers a reason to stay before they leave.

···

End screen엔드 스크린

The last 5–20 seconds of a video, offering next-video and subscribe elements to keep viewers going.

···

Call to Action콜투액션

The button or line of copy that points to the next action you want the user to take. A weak CTA gets ignored; a strong one pulls the eye.

···

Audience retention curve시청 지속률 그래프

A graph of what share of viewers is still watching at each point in a video — the most direct check on whether the hook and CTA worked.

Unlike a web button, a CTA inside a video is delivered by **voice, captions or graphics**: a line like "please like and subscribe," an animated subscribe button in the corner, an arrow graphic in the captions.

**Timing** decides its effect. Asking right at the start burdens viewers who have not received value yet; asking only at the end misses the many who already left. A common approach is **one short ask** right after the viewer got value (after the key information) and another on the end screen (→ end-screen).

Ask for one thing at a time. "Subscribe, like, comment, bell, share" all at once converts none of them. Giving a reason ("so you don't miss the next one") helps.

When to use

Use it when designing conversion moments in channel-growth videos, ads and promos. Limit it to one or two asks per video.

Open as page ↗

Suggest an entry

Tell us about a term, effect or component that’s missing. We read every suggestion.