유튜브 자동재생 설정 및 음소거 설정 방법을 알려드리겠습니다. 유튜브 동영상은 공유 기능을 이용하여 소셜 미디어, 메신저 등으로 링크를 공유할 수 있습니다. 공유 기능 중 퍼가기가 있는데요. 이 퍼가기를 이용하면 유튜브 영상을 웹사이트나 블로그 등에 게재할 수 있습니다. 이 때 소스 코드를 조금 변경해주면 유튜브 동영상이 자동으로 재생됩니다.
티스토리 블로그 등의 경우 사이드바 영역에 유튜브 동영상을 넣어 놓으면 방문자 접속 시 자동으로 재생되니 주의하셔야 합니다. 유튜브 자동재생 설정 한 소스 코드를 이용하여 게재하면 해당 페이지에 방문자가 접속했을 경우 자동으로 영상이 재생됩니다.
게시물 목차
유튜브 자동재생
동영상 퍼가기로 웹페이지에 유튜브 동영상을 게재할 경우 플레이 버튼을 눌러야만 동영상이 재생됩니다. 너무 당연한 것인데요. 어떤 경우에는 자동 재생되어야 하는 경우도 있습니다.
요즘은 쉽게 볼 수 없지만 사이트에 브금(배경 음악, Background music)이 유행했던 시절이 있었습니다. 유튜브 동영상이 자동 재생 된다면 브금용으로 사용할 수 있겠죠.
참고로 요즘은 가수들이 뮤직 비디오를 유튜브에 공개하는 추세이다 보니 배경 음악으로 사용할 음원이 정말 많습니다. 널렸다고 표현해도 될 정도 정말 많습니다.
배경 음악 용도로만 사용되는 것은 아니죠.
브금용 활용만 있는 것은 아니죠. 반대로 동영상에서 소리가 필요 없는 경우도 있을 겁니다. 동영상에서 소리는 빼고 영상만 재생 되게 하는 것도 가능합니다.
참고로 스마트폰에서는 유튜브 동영상이 자동 재생되지 않습니다. 데이터 사용 문제가 있기 때문에 정상 적인 방법으로는 스마트폰에서 유튜브 동영상을 자동 재생 시킬 수 없습니다.
유튜브 공유 퍼가기 소스
우선 먼저 유튜브 동영상 퍼가기를 모르시는 분들을 위해 간단하게 설명하자면, 유튜브 동영상 우측 하단에 보면 공유가 있습니다.
- 이 공유를 클릭하면 하면 링크 공유 팝업이 열립니다.
- 링크 공유에서 퍼가기 버튼을 클릭하면 동영상 퍼가기 소스 창이 열립니다.
- 동영상 퍼가기 창에서 동영상 퍼가기 소스(아이프레임 소스 코드 전체 복사)를 복사한 후 글 쓰기에 붙여 넣으면 됩니다.
티스토리 블로그를 예로 들자면 글쓰기 에디터 창에서 우측 상단의 html 체크한 후 html 모드에서 유튜브 동영상 퍼가기 소스를 붙여 넣으면 됩니다.
퍼가기 소스로 삽입한 유튜브 동영상
유튜브 동영상 퍼가기 기본 소스를 사용하면 웹페이지에서 위와 같이 보여집니다.
중앙의 플레이 버튼을 클릭해야만 동영상이 재생 됩니다.
음소거 상태로 삽입한 유튜브 동영상
기본 소스에 자동 재생 파라미터와 음소거 파라미터를 추가해주면 위와 같이 유튜브 동영상이 음소거 상태로 자동 재생됩니다.
자동 재생만 적용하면 유튜브 동영상 퍼가기 소스가 삽입된 페이지에 방문한 사람들은 브금을 들을 수 있겠죠. 덤으로 영상도 볼 수 있겠고요.
유튜브 자동재생 및 음소거 설정
아이프레임으로된 유튜브 동영상 소스 코드 중에 ‘동영상 ID(src=”동영상ID”)’ 부분 뒤에 파라미터를 추가해주면 자동 재생됩니다.
- ?autoplay=1
- 동영상 ID 값 뒤에 붙여 주면 자동 재생됩니다.
- ?mute=1
- 동영상 ID 값 뒤에 붙여 주면 음소거 상태로 재생됩니다.
- ?autoplay=1&mute=1
- 두 개를 같이 넣어주면 음소거 상태로 자동 재생 됩니다.
참고로 파라미터는 매개변수인데요. 쉽게 옵션이라고 생각하면 됩니다.
웹법사가 알기로는 동영상 퍼가기에 사용할 수 있는 매개변수는 대략 20여 가지가 있는 것으로 알고 있습니다. 유튜브 동영상 재생 시간을 설정하거나 반복 재생 설정도 할 수 있습니다.
사용 가능한 매개변수는 유튜브 개발자 사이트 플레이어 매개변수에서 확인할 수 있습니다.
자동 재생 및 음소거 소스 예제
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/SID9lz5muBQ?autoplay=1&mute=1″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen=””></iframe>
- 유튜브 퍼가기 기본 소스
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/SID9lz5muBQ” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
- 유튜브 자동재생 소스
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/SID9lz5muBQ?autoplay=1” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
- 유튜브 자동재생 및 음소거 소스
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/SID9lz5muBQ?autoplay=1&mute=1” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
이해가 잘 안되시는 분들이 있을까 싶어 꼭 집어 설명하자면, 기본 소스에 빨간색을 붙여 주면 자동 재생됩니다.
파란색을 붙여 넣어주면 음소거 상태로 자동 재생 됩니다.
위쪽의 예제 소스 복사해서 사용하시면 되겠습니다. 예제 소스 우측에 있는 copy 버튼 누르면 예제 소스가 클립 보드로 복사 됩니다. * 당분간 소스 코드 복사 기능은 작동하지 않습니다. 시간이 되면 다시 구현하도록 하겠습니다.
퍼가기 소스 (아이프레임 소스)에 사용 가능한 매개변수를 이용하면 유튜브 동영상 반복재생 또는 영상의 시작 시간을 설정하는 것도 가능합니다. 자세한 내용은 유튜브 반복재생 설정 및 유튜브 동영상 재생 시간 설정하기 글을 참고하세요.
내용을 보면 알겠지만 여러 동영상을 순차적으로 연속 재생 시키는 것도 가능합니다.
확장 프로그램을 이용하면 유뷰트 사이트 (https://www.youtube.com/) 내에서도 유튜브 자동재생 및 순차 반복 재생 시킬 수 있습니다. 원하는 부분만 구간 반복 재생 시킬 수 있네요. 끝~