외부 미디어 파일 임베드

페이지, 블로그 글 및 지식창고 문서의 서식 있는 텍스트 모듈에 YouTube 동영상과 같은 외부 미디어 파일을 임베드할 수 있습니다. 페이지의 드래그 앤 드롭 영역이나 드래그 앤 드롭 이메일 편집기에서 동영상 모듈에 동영상을 임베드할 수도 있습니다.

동영상과의 상호 작용을 추적하려면 대신 HubSpot의 동영상 도구를 사용하세요.

지원되는 미디어 유형

임베드 기능은 대부분의 미디어 유형에 일반적으로 사용되는 oEmbed 형식의 URL을 지원합니다. oEmbed 형식을 사용하는 플랫폼에는 YouTube, Spotify, Vimeo 등이 있습니다. 지원되는 미디어 제공업체의 전체 목록은 oEmbed 설명서를 참조하세요.

비공개 YouTube 동영상과 같이 추가 보안이 적용된 미디어 파일은 지원되지 않습니다.

서식 있는 텍스트 모듈에 외부 미디어 파일 임베드하기

참고: 외부 미디어 파일은 마케팅 이메일의 서식 있는 텍스트 모듈에 임베드할 수 없습니다.

서식 있는 텍스트 편집기에 URL을 직접 붙여넣어 서식 있는 텍스트 모듈에 미디어 파일을 임베드할 수 있습니다. 미디어 파일의 URL을 추가할 때 오류 메시지가 표시되면 임베드 코드를 대신 삽입하는 것이 좋습니다.

URL로 외부 미디어 파일 임베드하기

• 콘텐츠로 이동합니다:

  • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
  • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
  • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
  • 지식 베이스: HubSpot 계정에서 콘텐츠 > 기술 자료로 이동합니다.
• 콘텐츠의 이름을 클릭합니다.
• 콘텐츠 편집기에서 서식 있는 텍스트 모듈을 클릭합니다 .
• 미디어 파일의 URL을 서식 있는 텍스트 모듈에 붙여넣습니다. 미디어 파일 미리 보기가 자동으로 채워집니다.

임베드 코드를 사용하여 외부 미디어 파일 임베드하기

• 콘텐츠로 이동합니다:

  • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
  • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
  • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
  • 지식 베이스: HubSpot 계정에서 콘텐츠 > 기술 자료로 이동합니다.
  • 이메일HubSpot 계정에서 마케팅 > 이메일로 이동합니다.
• 페이지의 이름을 클릭합니다.
• 콘텐츠 편집기에서 서식 있는 텍스트 모듈을 클릭합니다.
• 서식 있는 텍스트 도구 모음에서 삽입 드롭다운 메뉴를 클릭하고 임베드를 선택합니다.
• 대화 상자에서 외부 미디어 파일의 임베드 코드를 입력합니다. 파일 미리보기가 표시됩니다.
• 삽입을 클릭합니다.

외부 미디어 파일 포맷하기

• 콘텐츠로 이동합니다:

  • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
  • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
  • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
  • 지식 베이스: HubSpot 계정에서 콘텐츠 > 기술 자료로 이동합니다.
• 콘텐츠의 이름을 클릭합니다.
• 콘텐츠 편집기에서 서식 있는 텍스트 모듈을 클릭합니다.
• 임베드된 파일을 클릭합니다.
• 도구 모음에서 미디어 파일의 위치, 간격 및 크기를 편집합니다.

• • 텍스트 블록 내에서 미디어 파일의 위치를 조정하려면 inline 정렬 아이콘을 클릭합니다.
  • 동영상을 반응형으로 만들려면 fullWidth 전체 너비 아이콘을 클릭합니다. 동영상이 시청하는 디바이스의 전체 너비를 차지합니다.
  • 파일 크기를 조정하려면 너비와 높이에 대한 픽셀 값을 입력합니다.
  • 파일의 여백을 조정하려면 간격 드롭다운 메뉴를 클릭하고 필드에 픽셀 값을 입력합니다.

참고: <스크립트> 태그가 포함된 임베드된 미디어 파일은 동적 콘텐츠를 생성하므로 전체 너비가 지원되지 않습니다.

• 미디어 파일의 고급 옵션을 편집하려면 edit 편집 아이콘을 클릭합니다.
  • 개발자는 임베드 코드 텍스트 필드에서 임베드된 동영상의 스타일과 동작을 편집할 수 있습니다.
  • 로딩 동작을 설정하려면 Iframe 로딩 드롭다운 메뉴를 클릭하고 옵션을 선택합니다:
    • 브라우저 기본값: 이미지의 로딩 동작은 방문자의 브라우저 설정에 따라 결정됩니다.
    • 지연: 방문자가 페이지의 해당 부분에 도달할 때만 이미지가 로드됩니다. 이렇게 하면 페이지가 로드되는 데 걸리는 시간이 단축되고 SEO가 향상됩니다.
    • Eager: 페이지가 로드되는 즉시 이미지가 로드됩니다.
  • 적용을 클릭합니다.

외부 미디어 파일 교체

임베드된 외부 미디어 파일을 교체해야 하는 경우 원본 파일을 제거한 다음 새 파일의 URL을 임베드합니다:

• 콘텐츠로 이동합니다:

  • 웹사이트 페이지로 이동합니다: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
  • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
  • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
  • 지식 베이스: HubSpot 계정에서 콘텐츠 > 기술 자료로 이동합니다.
• 콘텐츠의 이름을 클릭합니다.
• 콘텐츠 편집기에서 미디어 파일을 클릭한 다음 delete 제거 아이콘을 클릭합니다.
• 단계를 반복하여 새 파일 URL을 임베드합니다.

동영상 모듈에 외부 동영상 임베드하기

동영상 모듈을 사용하여 페이지 또는 마케팅 이메일에 외부 동영상을 임베드할 수도 있습니다. 이 모듈은 페이지의 드래그 앤 드롭 영역과 드래그 앤 드롭 마케팅 이메일 편집기에서만 사용할 수 있습니다.

이메일의 동영상 모듈에 외부 동영상 임베드하기

• HubSpot 계정에서 마케팅 > 이메일로 이동합니다.
• 이메일 이름을 클릭합니다.
• 사이드바 편집기에서 동영상 모듈을 클릭하고 이메일에 끌어다 놓습니다.
• 콘텐츠 편집기에서 동영상 모듈을 클릭하여 옵션을 편집합니다.
• 동영상 유형에서 임베드를 선택합니다.
• 동영상 URL을 입력합니다 .

• 왼쪽 사이드바 편집기에서 동영상의 크기, 썸네일 이미지 및 위치를 편집합니다:
  • 너비 또는 높이를 입력하여 동영상 크기를 조정합니다.
  • 동영상의 미리보기 이미지를 사용자 지정하려면 이미지 업로드를 클릭하여 컴퓨터에서 이미지를 업로드하거나 이미지 찾아보기를 클릭하여 파일 도구에서 이미지를 추가합니다.
  • 모바일 디바이스에서 동영상이 전체 너비로 표시되도록 하려면 모바일 디바이스에서 최대 너비로 표시 확인란을 선택합니다. 동영상은 원래 크기보다 큰 너비로 표시되지 않습니다.
  • 동영상을 오른쪽 또는 왼쪽으로 이동하려면 정렬 드롭다운을 클릭하고 왼쪽, 가운데 또는 오른쪽을 선택합니다 .
  • 동영상 측면에 공간을 추가하려면 클릭하여 패딩 스위치를 켜고, 상단, 하단, 왼쪽 및 오른쪽 텍스트 필드에 패딩의 픽셀 값을 입력하거나 모든 측면에 적용 확인란을 선택하여 동영상의 모든 측면에 동일한 패딩을 적용합니다.

페이지의 동영상 모듈에 외부 동영상 삽입하기

참고: 동영상 모듈은 드래그 앤 드롭 영역이 있는 페이지에만 추가할 수 있습니다.

• 콘텐츠로 이동합니다:

  • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
  • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
• 페이지 이름을 클릭합니다.
• 왼쪽 사이드바에서 add 추가 아이콘을 클릭합니다.
• 클릭하여 미디어 섹션을 확장한 다음 + 더 보기를 클릭하여 모든 미디어 모듈을 확인합니다.
• 비디오 모듈을 클릭하고 제자리로 끌어다 놓습니다.
• 사이드바 편집기의 동영상 유형 섹션에서 임베드를 선택합니다.
• 동영상 URL을 입력합니다. 대신 임베드 코드를 사용하려면 코드 임베드를 선택하고 임베드 코드를 필드에 붙여넣습니다.

• 동영상의 반응성을 변경하려면 크기 드롭다운 메뉴를 클릭하고 옵션을 선택합니다:
  
  • 자동 조정: 동영상이 반응형, 즉 브라우저 및 디바이스 크기에 따라 크기가 조정됩니다.
  • 정확한 너비와 높이: 미디어가 모든 디바이스에서 항상 이 정확한 크기로 표시됩니다. 너비 및 높이 상자에 치수에 대한 픽셀 값을 입력합니다.
• 동영상을 반응형으로 설정한 경우 최대 크기 드롭다운 메뉴를 클릭하고 옵션을 선택합니다:
  • 원본 크기: 동영상이 원래 크기보다 크게 확대되지 않습니다.
  • 전체 너비: 동영상이 시청하는 디바이스의 전체 너비를 차지합니다.
  • 맞춤: 동영상이 사이드바 편집기에서 설정한 특정 너비와 높이를 초과하지 않습니다. 최대너비 및 최대높이 상자에 해당 치수에 대한 픽셀 값을 입력합니다.
• 동영상의 썸네일 이미지를 사용자 지정하려면 업로드를 클릭하여 컴퓨터에서 새 파일을 선택하거나 이미지 찾아보기를 클릭하여 파일 도구에서 이미지를 선택합니다.
• 변경 사항 적용을 클릭합니다.