유튜브 삽입영상, 음소거 상태로 시작하게 만들기.

 

 

삽입된 유튜브 영상을 플레이하면 기본 음소거 상태에서 플레이하게 만들수 있다.

 

이것은 단순 재생옵션만 붙이면 되는 것이 아니라 스크립트를 이용,
다소 난이도가 있는 조건과 작업을 해주어야 가능하다.

블로그나 사이트에서 자동으로 영상이 시작하되

소리는 나지 않게 운영하고 싶을 때 유용할 것이다.

 

 

음식을 맛있게 만들어도 테이블에 내놓는 데코가 엉망이면 맛이 반감된다.
2만원 짜리 스테이크를 1회용 은박 쟁반에 내놓으면 그 맛이 나겠는가.

 

유튜브 영상 공유시 자동재생, 재생품질등 수십 가지의 플레이어 옵션들이 있지만
유독 사운드에 관한 옵션은 전무하다.

'&volumn=0' 또는 '&mute=1'

뭐 이렇게 끝에 옵션만 붙여 한방에 해결되면 좋으련만... 

 

자동재생은 시키고 싶고,

조용한 사무실, 카페, 늦은 밤 방에서 나만의 음악 들으며 사이트 접속시

"앗! 깜짝이야, 어디서 소리나는거야?" 소리는 듣고 싶지 않고...

 

EMBED,OBJECT,AUDIO 태그 등에 volume=0, mute 등의 태그처리는
유튜브 영상이 아니라 mp4.mp3 파일을 직접 연결할 때나 적용되는 것이고
단순 iframe 유튜브 공유소스코드는 해당사항이 없다.

 

삽입한 유튜브 영상을 플레이 할 때 무조건 음소거 상태에서 시작하게 하려면
IFrame Player API를 이용해 영상을 삽입해야 한다.

 

필요한 조건은

1. 별도의 스크립트와 iframe이 적용된 html파일.
2. (1번)의 html 파일을 올려둘 웹서버 또는 호스팅계정,
3. 게시판, 사이트, 블로그등에서 (2번)의 html파일을 가져올 iframe 태그 삽입이 가능한 상태등

위 3가지 조건이 갖추어져야 한다.

 

 

다음 순서대로 따라해 보시기 바랍니다.

 

※ 참고한 스크립트 코드 출처,

 http://me2.do/G8j2v7ok
감사합니다.

 

 

■ 별도의 스크립트와 iframe이 적용된 html파일 만들기.

 

- 아래 zip파일을 다운로드한다.

 

ytb_mute_play.zip

 

 

 

압축을 풀면 'ytb_mute_play.htm'파일이 나온다.
메모장으로 열어본다.

 

 

 

 

상단의 '스크립트 영역'과 하단의 'iframe 영역'이 있다.
복잡해 보이지만 내용을 다 이해할 필요는 없다.
필자도 잘 모른다.

어~ 이렇게 하란거지! 하고 알아듣고 이용만 할 뿐.
꼭 자동차엔진을 만들줄 알아야 운전을 할 수 있는 것은 아니잖는가.

 

 

 

하단의 iframe 코드를 보면 평소 유튜브 공유코드와 다른 부분이 있다.
- class와 id는 상단 스크립트 코드가 사용하는 부분이고
- &enablejsapi=1 옵션 부분은 iframe 내 유튜브 영상을 스크립트와 연결시켜주는 도어 역할을 한다.
- div태그는 스크립트가 인식할 이름표(바로 너, 너란 말이야)로서 iframe 태그 사이에 위치해야 한다.

 

 

 

수정할 부분은 따로 표시한 부분 뿐이다.
- 'playervars'에서 이미 알고있는 필요한 재생옵션을 눈치껏 붙여준다.
- 'videoid'에서 재생하고자 하는 유튜브 비디오의 id를 적어준다.

(공유코드에서 embed/___...  '?앞에 있는 랜덤한 알파벳')
- iframe태그에서 'videoid' 와 필요한 재생옵션들.

 

수정되었으면 html파일로 저장을 한다.
이 html파일이 실제 웹에서 음소거 상태로 재생될 유튜브 영상용 코드이다.

 

 

 

■ html 파일을 올려둘 웹서버 또는 호스팅계정.

 

 

  

이제 이 html 파일을 웹에서 접근가능한 계정에 올려둔다.

회사 계정을 이용하든 호스팅 서비스를 이용하든 알아서 올려둔다.

 

 

 

■ 영상을 삽입할 iframe 태그를 준비한다.

 

- 아래 'ytb_mute_play_iframe.zip'파일을 다운로드한다.

 

ytb_mute_play_iframe.zip

 

 

 

 

txt파일을 메모장으로 열고
표시된 부분에 위에서 올려둔 html파일의 경로로 수정한다.
필요하면 width, height 크기조정도 해 둔다.

 

그리고 'ctrl+a'로 전체선택 후 'ctrl+c'로 복사한다.
이제 게시판이나 블로그 등에 '붙여넣기'로 삽입하는 일만 남았다.

 

 

 

 

필자는 다음카카오에서 운영하는 티스토리 블로그를 사용하며

iframe을 지원하기 때문에
태그를 다룰 수 있을 경우 유용하게 사용할 수 있다.

 

 

 

 

삽입 후 html모드로 보면 코드가 잘 들어가 있는 것을 볼 수 있다.

 

체크! 유튜브의 iframe방식 공유코드를 직접 삽입하는 것이 아니라
위에서 만든 스크립트가 적용된 html파일을

 iframe으로 불러오게 만드는 작업과정임을 이해해야 한다.

 

 

 

※샘플 유튜브 영상.
 

 

플레이 하면 음소거 상태로 재생시작되는 것을 확인할 수 있다.

'autuplay=1' 옵션을 주었다면 사이트 접속시

영상은 자동재생되면서 소리는 음소거 상태로 진행되도록 만들 수도 있다.

(데스크탑, 노트북등 PC에서 적용됩니다. 폰, 태블릿등 모바일은 해당사항 없음)

 

참고로 유튜브 플레이어는 마지막 재생시 소리의 재생 상태를 기억하는 특성이 있다.
(마지막 재생시 사용자가 음소거 상태로 만들었다면 다른 유튜브 플레이어도 자동 음소거 상태로 시작된다.
반대로 소리가 나도록 재생했다면 다음 플레이어도 소리남으로 재생된다.)

 

하지만 위 스크립트 코드를 이용하면 이런 플레이어의 특성과 상관없이
무조건 삽입한 해당 영상은 음소거 상태로만 플레이 시작되게 만든다는 것이 이 포스팅의 핵심이다.