위는 배경음으로 활용한 유튜브 동영상 예제로 자동-반복 재생되도록 설정되어 있습니다.

현재 여러분이 보고 계신 이 글에서는 유튜브 동영상을 활용한 배경음이 사용되고 있습니다. 커뮤니티나 블로그에서 글을 작성할 때는 글에 맛깔스러움을 더하기 위해 이와 같은 배경음을 삽입하는 경우를 많이 보셨을 겁니다. 사실 요즘 배경음은 플래시를 통해 적용하는 게 거의 주를 이루는데요. 하지만 현재 글에서와 같이 유튜브 동영상도 훌륭하게 배경음으로 활용할 수 있습니다. 이번 글에서는 그 방법을 알아보도록 하겠습니다.

일단 배경음으로 사용할 유튜브 동영상의 고유주소를 알아내야 합니다. 유튜브 동영상의 고유주소는 유튜브 동영상 페이지 주소에 바로 나오기 때문에 이것이 확인하기 가장 쉬우며, 그 외에 공유의 동영상 공유소스 코드에서도 확인할 수 있습니다.





이렇게 확인한 고유주소를 아래에 제공해드리는 추천 코드의 고유주소 부분에 붙여넣기 하시면 됩니다.

배경음용 유튜브 추천 소스 코드
<div style="text-align: center;">
<embed width="320" height="25" src="http://www.youtube.com/v/고유주소?version=2&autoplay=1&loop=1" type="application/x-shockwave-flash" wmode="opaque"></embed>
</div>

이제 이렇게 얻은 소스 코드를 HTML 로 원하는 곳에 삽입하시면 됩니다. 그러면 이번 글의 시작에서 사용된 것과 같이 배경음 용도에 최적화된 유튜브 플레이어를 얻을 수 있습니다.


참고로 몇 가지 더 첨언하자면 재생 옵션에서 ?version=2 로 설정하셔야 반복 재생이 정상적으로 적용되며, 플레이어 컨트롤 바도 배경음의 용도에 좀 더 적합한 모습을 유지합니다. 요즘의 기본값은 3 인데 이렇게 할 경우 반복 재생이 먹히질 않고, 컨트롤 바가 아닌 매우 작은 동영상 영상 화면이 출력됩니다. 그러니 꼭 버전은 2 로 설정하시길 바랍니다.

그 외 &autoplay=1 은 자동 재생을 의미하며, &loop=1 은 반복 재생을 의미합니다. 아무래도 배경음 용도로 사용하는 것이기 때문에 두 가지 옵션은 모두 적용하는 것이 좋을 듯 합니다.

마지막으로 가로 너비인 width 값은 원하는대로 적당히 늘이고 줄여도 좋지만, 세로 높이인 height 값은 25 로 설정해야 정확하게 플레이어 컨트롤 바만 출력이 되고, 고로 가장 깔끔한 플레이어를 얻을 수 있습니다. 만약에 동영상 화면까지 출력되길 원한다면 width 와 height 값을 적절히 조절하시면 될 듯 합니다.


그럼 잘 활용해보세요. 이번 글은 여기까지 입니다. ^^

 

 

신고
캐플 블로그에 공개된 글은 반드시 원본 글의 링크를 포함시키는 조건으로 자유롭게 이용하실 수 있습니다.
하지만 블로그의 발전을 위하여 되도록이면 링크로 글을 소개해주시길 부탁드립니다. ^^

- 상업적인 용도의 사이트는 대상에서 제외됩니다. -
- 글에는 오류가 있을 수 있고, 추후 수정 또는 재발행될 수 있습니다. -
  1. ssy 2013.01.20 22:41 신고  댓글주소  수정/삭제  댓글쓰기
    클식시 자동 재생되고, 동영상이 끝나면 멈춰 있게 하려면 어떻게 해야 하나요?
  2. 감사합니다 2013.01.27 21:39 신고  댓글주소  수정/삭제  댓글쓰기
    아~~ 드디어 되는군요.

    다른 블로그들은 너무 어렵게 설명해서; 포기했었는데..
    쉽게 알려주셔서 너무나도 감사합니다ㅜ... 진심으로 감사합니다. (꾸벅)
  3. tasha 2013.02.17 01:21 신고  댓글주소  수정/삭제  댓글쓰기
    우아 무지 감사합니다. 이 포스트가 가장 간단명료하네요 !
    다만, 네이버 블로그에 포스팅해본 결과, 높이 height=28을 주어야 재생막대가 나타납니다.
    원인은 모르겠습니다만. 무튼 좋은 정보 공유해주셔서 감사합니다 !
  4. b.h 2013.04.21 23:06 신고  댓글주소  수정/삭제  댓글쓰기
    혹시 원하는 부분부터 시작하려면 소스코드에 뭘 넣어야 하나요?
    • BlogIcon CApple 2013.04.21 23:15 신고  댓글주소  수정/삭제
      해당 내용은 [link]http://cappleblog.co.kr/529[/link] 글에서 설명을 하고 있습니다. 간단하게 [rb]&start=초[/rb] 입니다. ^^
  5. SVIP 2013.05.08 14:34 신고  댓글주소  수정/삭제  댓글쓰기
    님 덕분에 배경음악삽입 문제를 해결하게 되었네요. 감사합니다! (현재 MP3를 블로그에 비공개로 올려 소스복사하는건

    자체검열때매 다막힌듯해서) 근데 약간의 문제가.. ?version=2로 설정을 함에도 플레이어컨트롤바가

    작은 동영상화면이 나오네요.(지금 여기화면에도 그렇게 나와요) 단/ 네이트메일은 정상적으로 출력되는데, 네이버 메일에서는 보낸메일이나

    미리보기시에는 분명 아무 문제없이 플레이어바만 나오고 잘되는데, 받은메일확인시에만 동영상(부분)이 작게

    표시되어나옵니다. 물론 짤린화면이 나오니 컨트롤바부분은 안보이는거죠ㅠ

    걍 가로 세로값을 '0'을 둬서 아예없이도 하긴하는데, 그래도 혹시나 문제해결법을 알고 계시나 해서

    질문드립니다. 근데 네이버메일에서는 "이컨텐트는 컴퓨터에 보안상위험을 가져올수있습니다. 보낸이를

    확인하신후에 파일재생여부를 판단하시기바랍니다"라고 버튼?이 뜨고나서 그걸 눌러야 음악재생이 되네요;;

    네이트 메일에서는 아무문제없이 재생컨트롤바 및 저런 문구는 없이 알아서 잘 플레이 됩니다.

    그리고 마지막으로.. 구글지메일로 이런 작업(?)을 해서 보냈을시 플레이어 작동이 안하던데,, 알아보니

    지메일은 HTML을 지원하지않는다?라는 이유 때문인지.. 지메일로 보낼시 이런 배경음악이 재생되게

    하는 방법도 아시면 좀 알려주시길 바랄게요.ㅠ (확실한건 모르겠으나 요즘 지메일에 보낸것도 수신확인

    여부가 되는듯하네요)
    • BlogIcon CApple 2013.05.12 01:01 신고  댓글주소  수정/삭제
      저는 설명한대로 나오는 것을 보니 유튜브 자체에서 뭔가 바뀐 것은 없는 것 같고요. 현재 사용하시는 브라우저 문제이거나, 추가 기능(확장 기능) 등에서 어떠한 영향이 있는 것은 아닐까 생각됩니다.
  6. 손님 2013.05.10 00:36 신고  댓글주소  수정/삭제  댓글쓰기
    저 같은 컴 초보도 알수있게 너무쉽게 설명해주셔서 김사합니다
  7. BlogIcon Topstar 2013.07.20 12:06 신고  댓글주소  수정/삭제  댓글쓰기
    이 방법을 찾으려고 들어왔는데 글을 읽다 보니 익숙한 문체..
    다시 보니 캐플님이시네요. 역시...

    오랜만에 인사드립니다. 건강하시죠?

    저는 한동안 다른 일에 몰두하다가 요즘에서야 조금 시간이 나는 듯해서 요기조기 기웃거리고 있습니다.
    음악도 다시 듣고 있고요.

    캐플님은 여전하신 것 같아 보기 좋네요.

    이제 가끔 찾아뵙도록 하겠습니다. ^^
  8. dodo 2014.05.05 16:43 신고  댓글주소  수정/삭제  댓글쓰기
    유투브로 음악 재생하는 방법 알고싶었는데 정말 감사해요. 덕분에 글을 잘 등록했습니다.
  9. ro 2014.06.30 05:43 신고  댓글주소  수정/삭제  댓글쓰기
    우와아 되네요, 감사합니다><!!
  10. 튜브 2015.01.12 16:15 신고  댓글주소  수정/삭제  댓글쓰기
    지나가다 감사해서 글남김니다.

    다른 플레이어는 익스프롤러 버젼 , 크롬, 사파라 등등 호환성 문제
    또는
    음악 소스가 있는 네이버나 다음쪽은 검열문제...등등으로 골머리 썩고 있었는데
    아주 딱 좋은 방법입니다

    감사합니다.
  11. 이찬희 2015.04.29 11:58 신고  댓글주소  수정/삭제  댓글쓰기
    아~ 인터넷 글 올리는 지식이 없었는데 덕분에 하나 얻어 가요 감사합니다. 설명이 필요한것만 되어 있어서 좋아요~
  12. ㅠㅠ 2016.08.01 15:21 신고  댓글주소  수정/삭제  댓글쓰기
    유튜브 영상마다 되는게 있고 안되는게 있네요
    플레이어는 뜨는데 노래가 재생이 되지 않는 곡들이 있는데 방법이 없을까요?
  13. 김학찬 2016.08.25 20:23 신고  댓글주소  수정/삭제  댓글쓰기
    막혔네요.. ㅠㅠ

댓글을 달아 주세요

- 댓글에선 예의를 지켜주시기 바라며, 블로그지기는 댓글에서 따로 활동하지 않습니다.

* 티스토리 사용자는 여기를 클릭하시면 로그인 됩니다.

BBCode 안내   굵게 밑줄 기울임 취소선   취소선 취소선 취소선 취소선   왼쪽 정렬 가운데 정렬 오른쪽 정렬   코드박스 인용구 이미지   이미지 업로드-Imgur.com