관련 글. API 를 이용해 영상을 삽입하는 방법에 대한 안내

https://studiomx.co.kr/5069/%ec%9c%a0%ed%8a%9c%eb%b8%8c-api-%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%b4-%ec%98%81%ec%83%81-%ec%82%bd%ec%9e%85-%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8-%ec%83%98%ed%94%8c/

—-

유튜브의 영상을 판매용도의 상세페이지에 첨부하거나 사이트에 첨부하는 경우가 많다.

유튜브 영상 수요가 매우 늘어나는 만큼 그 활용방법도 가지각색일텐데 이에대해서 깔끔하게 정리된 글이 없어서 작성한다.

글은 20년 01월 27일 작성 기준이며,

만약 예시화면이 설명과 동일하지 않다면 유튜브에서 매개변수를 삭제하거나 변칙을 준 것이므로 참고하길 바란다.

모든 예시는 주식회사 샐러드랩이 생산하여 판매 중인 “노란통연고” 제품을 예시로 작성한다.

예시 화면은 카페24 일반 쇼핑몰 솔루션을 사용하였다.

또한 텍스트를 넣기 너무 길어 모든 예시는 코드펜을 이용해 첨부한다.

본 글은 초보자를 위한 글이 아니며, 기본적인 html 구조는 이해하고 있어야지 글을 이해할 수 있다.

1. 사이즈에 따라 반응형으로 작동하는 유튜브 영상

유튜브 영상을 공유하기 버튼에서 그대로 퍼가면 모바일에서 아래 이미지처럼 가로가 잘린다.

이를 방지하기 위해서는 첨부하는 영상을 화면의 가로 길이에 따라 반응하여 사이즈가 바뀌도록 첨부해야한다.

1.
우선 아래 링크로 들어가서,
가이드가 될 스크립트 전체를 복사해서 영상을 추가할 위치에 HTML 양식으로 그대로 얹는다.

2.

그 다음, 위 링크로 들어가 전체 HTML 가이드 스크립트 중

최하단에 아래처럼 생긴 부분을 찾아낸다.

src=”https://www.youtube.com/embed/QpRigsf1CZg?rel=0&modestbranding=1″

3.
위 부분을 찾아냈으면,
내가 첨부하고자하는 영상의 링크주소에서 ‘ v= ‘ 뒤의 영상 고유텍스트로 대치한다.

4.

이제 영상의 가로세로 비율이 어떻게 되는지 전달해야한다.

링크의 고유텍스트를 대치해서 삽입한 스크립트의 윗줄에 보면
아래처럼 생긴 스크립트가 있다.

<div class=”youtubevideowrapperdiv youtubevideowrapperdiv20-9” >

위 처럼 적힌 부분의 빨간 텍스트 숫자에 비율을 적어주면된다.

예를 들어 1:1 비율의 영상이라면 youtubevideowrapperdiv1-1 로
16:9 비율의 영상이라면 youtubevideowrapperdiv16-9 로 반영하면 된다.

그렇게하면 아래 링크처럼 가로 최대 길이는 고정되고 가운데 정렬되면서 모바일에서는 가로로 꽉차는 유튜브 동영상이 추가된다.

http://m.saladlab.shop/product/%EC%8C%8D%EC%BB%A4%ED%92%80-%ED%9D%89%ED%84%B0-%EB%B0%8F-%EA%B0%81%EC%A2%85-%ED%9D%89%ED%84%B0-%EC%99%84%ED%99%94-%EB%85%B8%EB%9E%80%ED%86%B5-%EC%97%B0%EA%B3%A0%ED%81%AC%EB%A6%BC/11/category/1/display/2/

2. 들어가자마자 자동으로 동영상이 재생되게 하는 방법

유튜브는 영상이 로드되자마자 자동으로 재생될 수 있도록 매개변수라는 것을 만들어 두었다.

https://developers.google.com/youtube/player_parameters#showinfo 

위 링크에선 모든 매게변수를 확인할 수 있다.

<a href=”https://codepen.io/febreast/pen/dyPrLxG” target=”_blank”>https://codepen.io/febreast/pen/dyPrLxG</a>

위 가이드 링크에서

src=”https://www.youtube.com/embed/QpRigsf1CZg?rel=0&modestbranding=1″

라고 적힌 영상링크를

src=”https://www.youtube.com/embed/QpRigsf1CZg?rel=0&modestbranding=1&autoplay=1“

로 바꾼다면 자동재생된다.

구글에서 말하는 매개변수란 일반적인 링크 뒤에 추가적으로 붙는 링크-파라미터를 말한다.

3. 제목 없애는 방법

원래 유튜브는 제목을 없애는 매개변수를 제공하였다.
이 방법을 18년까진 분명 잘 썼었는데,
유튜브에서 19년 들어 정책을 바꾸는 바람에 기존에 매개변수로 제목을 없애 적용해두었던 모든 웹사이트가
제목이 다시 발생하게 되었다.

그래서 제목을 가리기 위해선 영상화면 사이즈를 조절하고 위 아래에 하얀색 사각형을 추가로 얹어서 가려줘야 한다.

이 부분은 난이도가 있어서 초보자는 따라하기 어려울 것 같다.

그래서 해당 텍스트를 이해할 수 있는 사람을 위해서만 설명하도록 하겠다.

가이드 링크에 들어가서 스크립트를 복사한 뒤,

<a href=”https://codepen.io/febreast/pen/dyPrLxG” target=”_blank”>https://codepen.io/febreast/pen/dyPrLxG</a>

<!– 제목 가리는 div–>
<div style=”position:absolute;background-color:white;width:100%;height:140px;z-index:99999″></div>
<!–//제목 가리는 div–>

라는 스크립트를 각 영상의 iframe 위에 올린다.

그러면 영상 위에 흰색 배경이 얹혀져서 가려진다.

영상의 세로 길이는 .youtubevideowrapperdiv4-3 같은 클래스로 조정하고

흰색바의 위치는 제목 가리는 div 의 포지셔닝을 조정하면 된다.

흰색바의 크기는 height 의 크기를 조정하면 된다.