이제는 많은 것을 유튜브로 해결하는 시대이기도 합니다. 과거에는 mp3, mp4파일을 공유하며 정보를 교환하기도 했죠. 당연히 당시에는 저작권에 대한 이해도가 낮기도 했습니다.
본 블로그에 공유된 동영상도 문제가 있다면 내리도록 하겠습니다. 어쨌든, 유튜브는 동영상을 올리고, 많은 사람들에게 자신의 동영상을 공개적으로 보여주고 있습니다. 또한, 이 동영상을 다른 사람들에게 공유할 수도 있습니다.
이번에 알아볼 내용은 유튜브 동영상 공유시 자동 재생하는 방법과 모바일에서도 자동 재생이 될 수 있도록 하는 방법입니다. 간단하게 스크립트 코드를 이용해 해당 기능을 활용해 볼 수 있습니다.
유튜브 동영상 자동 재생으로 공유하는 방법.
자신이 운영하는 사이트에 유튜브 동영상을 공유할 때, 자동 재생할 수 있는 방법입니다.
유튜브에서 동영상을 공유하는 방법은 실로 간단합니다. 좋아하는 동영상 페이지로 접속합니다. 그리고 하단에 있는 '공유'버튼을 선택하면 <>퍼가기, 카카오톡, 트위터, 페이스북, 이메일, 네이버등의 다양한 플랫폼으로 공유할 수 있습니다.
여기서 언급하는 것은 다른 플랫폼으로의 공유가 아닌, 자신의 페이지 입니다. "<>퍼가기"를 선택하면 동영상 링크 주소를 복사할 수 있습니다. 하나의 예시 동영상을 통해서 확인해 볼까요.
🔽 하단에는 제가 좋아하는 음악을 틀어주는 유튜브 채널의 한 영상입니다. 예시로 사용하죠. 우선, 퍼가기 코드를 적용한 모습입니다.
<iframe width="560" height="315"
src="https://www.youtube.com/embed/oNY2_XSLBzU"
title="YouTube video player"
frameborder="0"
allow="accelerometer;
autoplay;
clipboard-write;
encrypted-media;
gyroscope;
picture-in-picture"
allowfullscreen>
</iframe>
위 코드는 <>퍼가기를 이용해 복사된 코드의 내용입니다. 기본적인 html문법은 빼구요. 내용을 살펴보도록 하겠습니다. 우선 iframe으로 구성된 것을 알 수 있습니다. iframe은 외부의 페이지를 가져오는 기능이라고 생각하시면 됩니다. 간단하죠. 해당되는 웹페이지에 다른 페이시 소스를 가져와 특정 영역에서 보여주는 태그입니다.
그리고 크기, 동영상 주소, 프레림 설정등에 대한 내용들이 담겨 있습니다. allow부분을 보니, autoplay라는 기능도 있다고 나와 있습니다. 이제 해당 요소의 값을 지정해주는 것으로 약간의 수정을 해주면 됩니다.
태그에 src부분은 동영상의 주소 입니다. 해당 주소는 프레임이 요정하는 대상이 되는 것이며, 요청할 때, url뿐만 아니라 속성값을 전달할 수 있습니다. 여기서 전달된 값에 따라 data를 받아오게 됩니다. 우리는 autoplay값을 같이 전달하면 되겠죠.
| 👉(수정 전) : src="https://www.youtube.com/embed/동영상id" 👉(수정 후) : src="https://www.youtube.com/embed/동영상id?autoplay=1" |
위 코드를 적용해서 공유를 하시면 자동 재생을 할 수 있습니다. 기본은 그렇습니다. 하지만, 여기서 문제가 발생됩니다. 아마, 자동 재생이 안되고, 그냥 프레임으로 동영상 공유만 될거에요. 기본 정책들이 있습니다.
동영상은 많은 데이터를 필요로하게 됩니다. 또한, 동영상의 경우, 갑자기 재생이 된다면 사용자에게 나쁜 경험을 줄 수도 있습니다. 따라서, 사이트에 방문하는 사람들을 배려하고 보호하는 차원에서 음소거 모드도 설정해줘야 합니다. 그래야 브라우저에서 자동 재생이 가능합니다. 수정해볼까요.
👉(수정 전) : src="https://www.youtube.com/embed/동영상id" 👉(수정 후) : src="https://www.youtube.com/embed/동영상id?autoplay=1" 📌(수정, 최종) : src="https://www.youtube.com/embed/동영상id?autoplay=1&mute=1" |
src 부분의 최종 수정은 위에 있는 📌와 같습니다. <>퍼가기의 코드 중 src부분을 📌부분의 수정된 내용을 추가해서 등록을 하시면 웹브라우저에서 음소거 모드로 자동 재생되는 것을 확인할 수 있습니다. 이제 모바일 부분도 살펴볼까요.
모바일에서 공유된 유튜브 자동 재생 설정하는 방법.
❌ 꼭 기억하셔야 합니다. 도영상의 재생은 데이터를 사용하기에 기본적으로 자동 재생을 막아두고 있다고 합니다. 사용자의 원치 않는 데이터 사용을 막기 위해서라고 합니다. 알아두시고, 다음 코드를 활용하시길 바랍니다.
해당 방법은 youbute api를 활용하는 방법입니다. 위에서 본 코드보다는 조금 더 많습니다. 다만, 수정할 부분은 크게 없습니다. 동영상 id, 음소거, 소리크기등만 수정하시면 될 것 같습니다.
1️⃣ 동영상 프레임이 지정될 장소에 태그를 만들어 줍니다.
<div id = 'player11'></div>
2️⃣ 스크립트를 이용해 youtebe api를 호출 합니다.
<script src="https://www.youtube.com/iframe_api"></script>
3️⃣ 마지막으로 불러온 플레이어에 속성을 지정합니다. 마찬가지로 스크립트입니다.
<script>
var player;
function onYouTubeIframeAPIReady(){
player = new YT.Player('player11',{
width:'100%',
height:'100%',
videoId:'동영상id',
playerVars:{'autoplay':1,'playsinline':1},
events:{ 'onReady':onPlayerReady }
});
}
function onPlayerReady(el){
el.target.mete(); <!-- 음소거 -->
el.target.setVolume(20); <!--실행 볼륨-->
el.target.playVideo();
};
</script>
이제, 위에서 나열된 3가지의 코드에서 동영상id, 음소거, 볼륨을 설정하여 원하는 페이지에 넣어주시면 모바일에서도 유튜브 동영상이 자동으로 재생되는 것을 확인할 수 있습니다. 사이드바에 넣는다면 사이드바에서 자동으로 재생되겠죠.
➕ 참고, 인터넷에 있는 다양한 정보와 코드를 참고했습니다. 몇몇 사이트가 있는데요. 검색하면 모두 상단에 노출되어 있으니, 찾아보시고 참고하시면 더 많은 도움이 될 수 있습니다.
댓글