우리가 사는 세상을 모두 알기엔 인생은 너무 짧다.!!

사이트관리

유튜브 동영상을 글 속에서 배경음으로 사용하기 - 자동 및 반복 재생 적용

거북선인 2018. 3. 13. 13:25
반응형

유튜브 동영상을 글 속에서 배경음으로 사용하기 - 자동 및 반복 재생 적용



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

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

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

562454137_XHUNbIfR_f1e2a87091c281dcdc8667c81162e90bd7d058d0.2240445050E0F8B9244F2D


562454137_wQL4RjXJ_dbe9698b6e929aa486ccee03353cb73d5df53b10.154A875050E0F8BA166268


562454137_ugi4HWnb_96ea5bc5bb082f536acfb8c07fe9beee408db95c.123E425050E0F8BB270884



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

배경음용 유튜브 추천 소스 코드
<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 값을 적절히 조절하시면 될 듯 합니다.
반응형