Design Atlas
한국어
◧ Film & photo

End screen

엔드 스크린

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

Also known as: End cardOutro card엔딩 카드
···
html
<div class="vid">
  <div class="msg">끝까지 봐주셔서 감사합니다</div>
  <div class="next"><b>다음 영상</b></div>
  <div class="sub"><span>구독</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%}}
.msg{position:absolute;left:6%;top:14%;font:700 clamp(10px,3.6vmin,17px) sans-serif;animation:ms 6s ease infinite}
.next,.sub{position:absolute;opacity:0;animation:ec 6s ease infinite}
.next{right:6%;top:18%;width:38%;aspect-ratio:16/9;border-radius:8px;background:linear-gradient(135deg,#6a5acd,#3a2f8f);display:flex;align-items:center;justify-content:center;font:700 clamp(9px,3vmin,14px) sans-serif}
.sub{right:6%;bottom:16%;width:20%;aspect-ratio:1;border-radius:50%;background:#555;display:flex;align-items:center;justify-content:center;font:700 clamp(8px,2.8vmin,13px) sans-serif;animation-delay:.3s}
@keyframes ms{0%,55%{opacity:1}70%,100%{opacity:.4}}
@keyframes ec{0%,58%{opacity:0;transform:scale(.9)}68%,95%{opacity:1;transform:scale(1)}100%{opacity:0}}
···

Video call to action영상 CTA (구독·좋아요 유도)

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

···

Video hook훅 (후킹)

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

···

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.

···

Shallow depth of field얕은 심도

Opening the aperture wider (a smaller f-number) blurs everything outside the focal plane faster — the subject stays sharp while the background melts away.

The end screen is a **what-to-do-next card** at the tail of a video. YouTube lets you place next videos, playlists, a subscribe button and links in the last 5–20 seconds; on TikTok and Reels you bake it into the final shot as graphics.

The key is to **leave the space empty in advance.** If you edit without accounting for where platform elements will land, they cover captions or people. Keep the background simple and add a one-line voiceover like "watch this next."

Many viewers leave before the video ends, so design the end screen as **a reward for those who stayed.** Anything essential should wrap up before it.

When to use

Use it in the final edit of series or channel videos. Leave the areas where platform elements will sit (usually right and bottom) empty.

Open as page ↗

Suggest an entry

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