Squarespace에서 비디오 자동 재생을 만드는 방법

Squarespace 웹사이트에 자동 재생 비디오를 추가하면 방문자의 참여를 유도하고 중요한 콘텐츠에 대한 관심을 끌 수 있습니다. 자동 재생 비디오는 제품 데모, 자습서 또는 홍보 자료에 특히 유용합니다. 이 가이드에서는 Squarespace 사이트에 자동 재생 동영상을 추가하는 세 가지 방법인 YouTube 삽입, HTML 동영상 태그 및 SmartVideo(Swarmify)에 대해 설명합니다.

Squarespace 사이트에 자동 재생 YouTube 비디오를 추가하는 방법

YouTube는 가장 널리 사용되는 비디오 호스팅 서비스 중 하나입니다. 다행스럽게도 Squarespace 자동 재생 비디오를 사이트에 추가하는 것은 간단합니다. 즉, 트래픽 유출 및 산만함이 없는 대체 호스팅 서비스가 비즈니스에 더 나은 선택인 데에는 몇 가지 이유가 있습니다.

첫 번째 단계는 YouTube 동영상으로 이동하여 동영상을 선택하는 것입니다. 동영상 보기 페이지에서 동영상 제목 아래에 있는 좋아요 및 싫어요 버튼을 찾습니다. 바로 오른쪽에는 "공유" 버튼이 있습니다. 클릭하세요.

이렇게 하면 일련의 소셜 미디어 링크가 표시됩니다. "삽입"을 클릭합니다.

Embed 코드를 제공하는 새 창이 나타납니다. "복사"를 클릭하면 임베드 코드가 클립보드에 복사됩니다.

이제 포함 코드가 있습니다. 그러나 이 코드는 비디오를 자동 재생하지 않습니다. 자동 재생을 사용하려면 수정해야 합니다. 코드를 메모장과 같은 간단한 텍스트 편집기에 붙여넣습니다.

임베드 코드에서 동영상의 URL을 찾습니다. 다음과 같이 표시됩니다.

src="https//www.youtube.com/embed/xyz"

해당 URL의 끝에서 따옴표 안에 다음을 추가합니다.

?autoplay=1&mute=1

이제 코드는 다음과 같아야 합니다.

src="https//www.youtube.com/embed/xyz?autoplay=1&mute=1"

이 코드 변경은 기본적으로 자동 재생을 활성화하고 비디오를 음소거합니다. Chrome, Safari 및 Firefox를 포함한 많은 브라우저는 동영상이 음소거되지 않은 경우 동영상 자동 재생을 차단하려고 시도합니다.

이제 편집된 코드가 있으므로 Squarespace 사이트로 돌아갑니다. 비디오를 원하는 사이트 섹션으로 스크롤하십시오. 아직 별도의 섹션이 없는 경우 파란색 버튼인 섹션 추가를 사용하여 섹션을 추가하십시오.

그런 다음 섹션의 오른쪽 상단 모서리에 있는 연필 버튼을 클릭하여 섹션을 편집합니다.

그러면 추가할 수 있는 여러 요소가 표시됩니다. 기본 제목 아래에서 새 코드 블록을 추가하는 옵션을 찾습니다. </> 코드를 클릭합니다.

마지막으로 텍스트 파일에서 포함 코드를 복사하여 코드 편집기에 붙여넣기만 하면 됩니다. 사이트가 자동으로 새로고침되고 동영상이 나타납니다. YouTube 동영상을 삽입하는 방법입니다.

HTML 태그를 사용하여 자동 재생 비디오를 삽입하는 방법

YouTube 또는 다른 비디오 호스팅 사이트에 업로드하지 않은 비디오가 있는 경우 Squarespace 자체를 호스트로 사용할 수 있습니다. 동영상이 업로드된 동영상에 설정된 요구 사항을 충족하는지 확인하세요.

첫 번째 단계는 자산 라이브러리를 여는 것입니다.

그런 다음 비디오 파일을 컴퓨터에서 자산 라이브러리로 끌어다 놓아 업로드 프로세스를 시작합니다.

동영상이 업로드되면 파일 세부 정보 버튼(동영상 모서리에 있는 세 개의 점)을 클릭합니다. 그런 다음 업로드한 동영상의 새 URL을 찾습니다.

해당 URL을 복사하여 메모장과 같은 텍스트 편집기에 붙여넣습니다. 그런 다음 다음과 같이 URL 주위에 HTML 태그를 추가합니다.

<video controls autoplay muted src="[URL]"></video>

동영상 HTML 코드가 준비되면 이전에 언급한 방법을 사용하여 코드 블록을 추가하고 코드를 붙여넣을 수 있습니다.

Squarespace 사이트에 자동 재생 SmartVideo를 추가하는 방법

사이트에 동영상을 올릴 때 동영상이 빠르게 로드되고 방해받지 않기를 원합니다. 이를 수행하는 가장 좋은 방법은 Swarmify와 같은 콘텐츠 전송 네트워크를 활용하는 것입니다. Swarmify의 SmartVideo를 사용하면 비디오 콘텐츠를 완벽하게 제어할 수 있으므로 방해가 되는 광고로 인한 트래픽 손실을 제거할 수 있습니다.

또한 Swarmify는 다른 어떤 서비스보다 빠르게 시청자에게 비디오 콘텐츠를 제공하도록 세심하게 설계된 전 세계적으로 분산된 서버 네트워크를 보유하고 있습니다. Squarespace 사이트에 자동 재생 SmartVideo를 추가하는 것은 간단합니다.

먼저 SmartVideo 계정을 설정해야 합니다. 계정 설정을 완료하면 Swarmify에서 비디오를 제공하는 데 필요한 스크립트 코드와 swarmcdnkey가 제공됩니다.

다음으로 Squarespace 사이트에 SmartVideo를 설치합니다. 설정을 클릭합니다.

고급을 클릭합니다.

그런 다음 코드 삽입을 클릭합니다.

그런 다음 키와 함께 받은 스니핑 코드를 헤더 텍스트 상자에 붙여넣습니다.

마지막으로 저장을 클릭합니다.

변경 사항을 저장하면 SmartVideo가 사이트에 완전히 설치됩니다. 사이트에 YouTube 동영상이 있는 경우 SmartVideo가 자동으로 방해 없는 동영상으로 변환하기 시작합니다. 다른 소스의 비디오가 있는 경우 SmartVideo 태그를 사용해야 합니다.

이전의 다른 방법과 마찬가지로 이것은 새로운 코드 블록을 사용하여 수행됩니다. Squarespace 사이트로 이동하여 비디오를 원하는 섹션으로 이동하고 편집을 클릭한 다음 </> 코드를 클릭합니다.

코드 상자가 있으면 다음 구문을 사용하여 SmartVideo 태그를 추가할 수 있습니다.

<smartvideo src="[URL]" width="1280" height="720" class="swarm-fluid" poster="path/to/my/image.png" controls muted autoplay></smartvideo>

이 코드는 사이트에 동영상을 추가합니다. URL은 비디오에 대한 링크여야 합니다. SmartVideo는 Vimeo, Amazon S3, Google Cloud Storage, Dropbox 및 Google 드라이브 링크 등을 지원합니다.

컨트롤 옵션을 사용하면 사용자가 비디오를 일시 중지하고 재생할 수 있습니다. 음소거 및 자동 재생 옵션은 이 가이드에서 다룬 다른 방법과 유사하게 작동합니다.

SmartVideo가 귀하의 비즈니스를 위한 최고의 옵션인 이유

나열된 세 가지 옵션 중에서 사이트에 비디오 콘텐츠를 추가할 때 SmartVideo가 확실한 승자인 몇 가지 주요 이유가 있습니다. 첫 번째 옵션은 YouTube에 의존합니다. YouTube는 사용자에게 매우 친숙한 빠른 플레이어이지만 단점이 있습니다. YouTube의 주요 문제는 동영상이 시작되기 전에 재생할 수 있는 광고입니다.

이러한 광고는 리드의 주의를 분산시키고 결국 귀하의 사이트와 브랜드로부터 트래픽을 분산시킬 수 있습니다. 이것은 "무료"로 YouTube를 사용하여 비디오를 삽입할 수 있는 것에 대해 지불하는 가격입니다. 또한 YouTube 동영상이 끝날 때 플랫폼은 항상 사이트의 주제에 해당하거나 그렇지 않을 수 있는 다른 동영상을 추천합니다.

두 번째 옵션은 비디오를 호스팅하는 Squarespace에 의존합니다. 그러나 Squarespace는 동영상을 사이트에 업로드하려는 위치에 따라 동영상의 형식과 길이를 제한합니다. 예를 들어 사이트 섹션의 동영상 요소는 최대 업로드 시간을 60초로 제한합니다. 또한 Squarespace는 비디오 호스팅 서비스로 설계되지 않았으며 매우 빠른 결과를 제공하는 데 의존해서는 안 됩니다.

세 번째 옵션은 자동으로 또는 SmartVideo 태그를 통해 SmartVideo를 사용하는 것입니다. 이 옵션을 사용하면 트래픽 사이포닝 광고가 없는 빠른 비디오 전송이 가능합니다. 또한 SmartVideo가 더 빠릅니다. 저희 플레이어는 YouTube 플레이어보다 12배 이상 빠르게 로드됩니다!

또한 YouTube는 고객 지원을 거의 제공하지 않습니다. 반면에 Swarmify는 필요한 모든 것을 도와줄 준비가 되어 있는 경험 많고 친절한 지원 팀에 대한 액세스를 제공합니다.

지금 Swarmify를 시작하기 위해 기다리지 마십시오!

스위치 만들기