[디자인블럭] he26 : 동영상 – 브랜드 스토리를 영상으로 생생하게 전달하는 블럭

유튜브 동영상 블럭

 

 

 

 

 

 

✅ [디자인블럭] he26 : 동영상 – 브랜드 감성과 현장감을 함께 전달하는 영상형 블럭

 

 

 

🔠 블럭개요

YouTube 영상을 중심에 배치해 브랜드의 핵심 메시지를 감각적으로 전달하는 구성. 영상 아래에는 스토리텔링 중심의 소개문과 버튼이 함께 배치되어 정보 전달력과 감성적 몰입을 동시에 만족시킴.

 

 

 

 

📌 사용목적

• 제품 또는 브랜드의 생산/제조/서비스 과정을 생생하게 전달
• 현장감, 신뢰감이 필요한 콘텐츠 소개에 최적
• 고객의 감동, 후기, 다큐형 콘텐츠 활용 가능

 

 

 

🎨 디자인 특징

• 상단 대형 영상 삽입으로 시선 집중
• 부드러운 그림자와 호버 애니메이션으로 세련된 인터랙션
• 텍스트와 CTA(버튼)가 함께 구성되어 유도 흐름이 자연스러움
• 모바일 기준 1열 배치, PC 해상도 확장 시 반응형 양열 지원 (주석 처리로 선택적 활용 가능)

 

 

 

 

❄️ 활용 예시 (제품/브랜드 등)

• 식품 / 고객 후기
“영상을 보니 정말 농장에서 직접 따는 느낌이 들어요.”
“자연 속에서 자란 과일이라 믿음이 가네요.”
→ 감귤 농장 브랜딩 페이지에 활용하여 브랜드의 정성과 과정을 직접 보여줌으로써 신뢰와 감성을 동시에 전달

 

• 뷰티 / 제품 철학 소개
“성분부터 제조까지 하나하나 보여주니까 신뢰가 생겨요.”
“영상 덕분에 브랜드의 진심이 느껴졌어요.”
→ 화장품 브랜드의 성분 선정, 제조 공정 등을 영상으로 담아 철학과 투명성을 강조

 

• 전자기기 / 제작 공정 소개
“기기 내부 조립 과정을 영상으로 보여줘서 품질에 확신이 들었어요.”
“일반 광고보다 훨씬 설득력 있었어요.”
→ 프리미엄 전자 브랜드가 수작업 조립 공정을 영상으로 보여주며 기술력 강조

 

• 교육 / 학습 현장 브이로그
“수업 분위기를 영상으로 직접 보니 아이를 믿고 보낼 수 있겠어요.”
“아이들이 수업에 집중하는 모습이 인상 깊었어요.”
→ 유치원, 학원 등에서 아이들의 수업 모습을 자연스럽게 전달하며 학부모 신뢰도 상승

 

• 리빙 / 사용 후기 공유
“사용자가 직접 찍은 영상이라 더 와닿았어요.”
“실제 환경에서 쓰는 모습이 보여서 구매에 확신을 줬어요.”
→ 청소기, 주방용품 등 실사용자 리뷰 영상 콘텐츠로 활용

 

 

 

 

📢 마케팅 콘텐츠 확장 예시

• 블로그 / 브랜드 스토리 포스팅
→ ‘영상 + 텍스트 후기’ 조합으로 콘텐츠 밀도를 높여 검색 유입 극대화

• SNS (인스타그램, 페이스북 등) / 숏폼 클립
→ 해당 영상의 하이라이트 장면을 짧게 편집하여 티저 콘텐츠로 활용

• 유튜브 커뮤니티 / 영상 시리즈 유도
→ 해당 영상 블럭을 시리즈형 콘텐츠의 중심 콘텐츠로 구성

• 오프라인 매장 / QR 코드 안내
→ 해당 영상 링크를 매장 제품에 QR 코드로 연동하여 현장에서도 브랜드 스토리 경험 가능

 

 

 

💻 HTML 설명

동영상은 <iframe>을 이용하여 YouTube 영상 삽입.
he26 클래스의 구조는 .box 내부에 .imgArea(영상)와 .txtArea(텍스트)가 나뉘어 있으며, PC에서는 .imgArea와 .txtArea를 양옆으로 배치할 수 있도록 반응형 코드가 주석으로 포함되어 있음. 필요 시 주석을 해제해 사용 가능.

 

 

 

👉 커스터마이징 팁

• 영상 썸네일은 YouTube 커버 설정 또는 대표 이미지 삽입으로 개선 가능
• 텍스트는 브랜드 철학, 사용자 후기 등 맞춤형 문구로 교체하여 신뢰 강화
• 버튼은 상세 페이지, 제품 구매, 문의 등 다양한 CTA 목적에 맞춰 커스터마이징 가능

 

 

 

 

 

 

 

 

html

<!-- he26 : 동영상 -->
<div class="he26">
  <div class="row">
    <div class="col-md-12">
      <div class="box">


        <!--  -->
        <div class="box_inner">
          <div class="imgArea">
            <div class="movie">
              <div class="video-wrapper">
                <iframe src="https://www.youtube.com/embed/wQRlUGjEZww"
                  title="Harvest Fruits in Garden |The Peaceful Life In The Countryside." frameborder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
          </div>


          <!--  -->
          <div class="txtArea">
            <h4>매일 아침, 햇살 머금은 오렌지를 수확합니다 🍊</h4>
            <p>
              따뜻한 바닷바람과 햇살이 머무는 감귤밭. 저희 농장은 3대째 오렌지를 재배하며,<br>
              가장 신선한 맛을 전하기 위해 수확부터 선별, 포장까지 직접 책임지고 있습니다.
            </p>
            <span><a href="#none" class="btn">농장 소개 보기</a></span>
          </div>
        </div>


      </div>
    </div>
  </div>
</div>

 

 

 

 

 

 

css

/*****************************************************************
he26 : 동영상(유튜브)
*****************************************************************/
.he26 {
    position: relative;
}

.he26 .box {
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 30px;
    display: flex;
    transition: transform 0.2s;
}

.he26 .box:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.he26 .box_inner {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: flex-start;
}

.he26 .imgArea {
    width: 100%;
    text-align: center;
}

.he26 .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 10px;
}

.he26 .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.he26 .txtArea {
    width: 100%;
    padding-top: 10px;
}

.he26 .txtArea h4 {
    padding: 10px 0;
    font-weight: 700;
    font-size: 2.0em;
    color: #111;
}

.he26 .txtArea p {
    font-size: 1.250em;
    color: #888;
}

.he26 .txtArea span {
    display: inline-block;
    padding: 10px 0;
}

.he26 .txtArea span a {
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
}

.he26 .txtArea span:hover a {
    background-color: #111;
}

@media screen and (min-width: 768px) {
    /* .he26 .imgArea {
        width: 60%;
    }

    .he26 .txtArea {
        width: 40%;
        padding: 0 0 0 30px;
    } */
}