"스크롤해도 영상은 그대로! 블로그스팟 유튜브 영상 상단 고정(Sticky) 방법"

블로그스팟에 유튜브 영상 첨부 글을 쓰다보니, 스크롤을 내릴 때 영상이 상단에 자석처럼 딱 붙고(Sticky), 본문 내용만 영상 아래로 미끄러지듯 통과하게 만드는 방식을 구현해 보고 싶어졌다. 바로 이렇게!


유튜브 영상 상단에 고정하는 방법: Sticky Header Video

1. 블로그스팟 관리자 화면 [테마] → [맞춤설정] → [고급] → [CSS 추가]에 아래의 코드를 복사해서 붙여 넣는다.

PC나 모바일에서 화면을 내리다가 올리면, 영상이 블로그 상단 메뉴(헤더)에 살짝 가려진다. 이 부분은 .sticky-video-wrapper의 'top: 0; /* 화면 최상단 고정 */'을 바꿔주면 된다. (블로그 상단 바의 높이는 50~60px 정도)

  • top: 0; → top: 56px; 으로 숫자 변경

CSS 

/* 상단 고정 비디오 스타일 */
.sticky-video-wrapper {
  position: -webkit-sticky; /* 사파리 대응 */
  position: sticky;
  top: 0;           /* 화면 최상단 고정 */
  z-index: 1000;    /* 본문보다 위에 위치 */
  background: #ffffff; 
  width: 100%;
  max-width: 640px !important; 
  margin: 0 auto !important;
}

.video-ratio-box {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 비율 */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.video-ratio-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: none !important;
}

/* 본문 영역 스타일 */
.article-content {
  position: relative;
  z-index: 1;       /* 영상 아래로 글이 지나가도록 설정 */
  background: #ffffff;
  padding-top: 20px;
}

2. 글쓰기 HTML 모드에서 아래 구조로 글을 작성한다.

글을 쓸 때 꼭 기억해야 할 것!

  • 영상 구역(<section class="sticky-video-wrapper">...</section>)은 맨 위에 있어야 한다.
  • 글 내용 구역(<article class="article-content">...</article>)은 그 바로 아래에 있어야 한다.

HTML 

<!-- 상단 고정 비디오 영역 -->
<section class="sticky-video-wrapper">
  <div class="video-ratio-box">
    <!-- src 뒷부분의 '영상_ID' 자리에 유튜브 아이디를 넣으세요 -->
    <iframe src="https://www.youtube.com/embed/영상_ID_입력" frameborder="0" allowfullscreen></iframe>
  </div>
</section>

<article class="article-content">
  <h2>여기에 기사 제목을 적으세요</h2>
  <p>내용을 길게 적으시면 스크롤 할 때 영상은 상단에 고정되고, 이 글들만 영상 밑으로 쓱 지나갑니다.</p>
</article>

※ 유튜브 ID 찾는 법: 유튜브 영상 주소가 https://youtu.be/vx2u5uUu3DE?si=11h7SzIX2HFV-4Qr라면, 슬래시(/) 바로 다음부터 물음표(?) 전까지인 vx2u5uUu3DE가 바로 ID임.
  1. 일반 주소형: youtube.com/watch?v= 뒤에 오는 영문+숫자 조합
  2. 공유 주소형: youtu.be/ 뒤에 오는 영문+숫자 조합 (물음표 전까지)

오늘의 한마디

Sticky 코드를 적용하면 영상을 보면서, 화면을 스크롤해서 글을 읽을 수 있다. 이렇게!

영상은 상단에 딱 붙어 있고, 화면을 스크롤하면 그 아래의 글들만 영상 밑으로 쓱 지나가는 방식(Sticky Header Video) 구현
본조비의 영상을 상단에 고정시킨 예시 화면

Sticky는 이런 느낌! 아래 글에서 직접 확인해 보는 건 어때?

Related Posts

댓글

댓글 쓰기