[티스토리 스킨만들기] 유튜브 재생목록을 블로그 배경음악으로 넣고 자동재생에 연속 재생까지 하는 법

[티스토리 스킨만들기] 유튜브 재생목록을 블로그 배경음악으로 넣고 자동재생에 연속 재생까지 하는 법

---

 

한때 제가 고등학생일 때 야자시간과 현재 저의 불면증을 해소시켜주시는 세레노님의 진짜 진짜 좋은 음악을

 

제 블로그 배경음악에 두면 좋겠다고 생각해서 오늘 글 쓰면서 해보겠습니다!!

 

https://www.youtube.com/channel/UC0kp1x32b-Y4cvP5r3vW_hw

Sereno

 

유튜브 태그 생성기를 쓰면 간편하긴 한데 재생목록은 가져오지 못하더군요.

 

게다가 언제 생겼는지 몰랐는데 퍼가기 기능에 HTML 태그로 퍼가기 기능이 있더군요.

 

아마 제가 신경 쓰지 않아서 몰랐던 것 같습니다.

 

영상 하나만 블로그에 배경음악으로 두고자 한다면

 

또는 글에 영상을 두고자 한다면

 

영상의 공유 버튼을 누르시면 됩니다.

 

네이버 블로그에는 HTML 위젯 기능이 있고

 

티스토리에는 HTML 배너 기능이 있더라고요.

 

 

복사한 태그를 HTML 배너 소스에 넣으면 될듯합니다.

 

여하튼 동영상의 공유 버튼을 누르시면 복사하는 버튼이 나올 겁니다.

 

 

 

 

영상 하나만 올리고자 하면 공유 버튼을 누르고 퍼가기 버튼을 누르면 자동으로 태그를 만들어주지만

 

저는 유튜브 재생목록을 배경음악으로 두고 싶기에 저와 같은 생각이신 분은 아래에서 계속하겠습니다.

 

 

 

---

그냥 동영상 태그 하나에 여러 리스트를 만들어서 할 수 있다고 하던데

 

3개 이상의 영상은 안된다고 하더군요. 그래서 그냥 재생목록 영상으로 만들겠습니다.

 

재생목록 링크를 가져와서 태그를 수정하려면 하려면 먼저 재생목록이 있어야겠죠

 

https://www.youtube.com/watch?v=xNoJb2iqUWc&list=PLfOyXtmFprMPe6ybXpoOxewJLLkyhhJSI

 

유튜브로 재생목록을 만들어줍시다.

 

그리고 재생목록 주소의 아이디를 복사시고 아래 코드를 수정하시면 됩니다.

 

위 재생목록 주소와 자동재생, 반복 재생을 설정하고 HTML 코드를 만들면 아래와 같이 됩니다.

 

아래 코드를 복사하여 HTML 편집에 넣으면 제 블로그 오른쪽처럼 유튜브가 떠다닐 겁니다.

 

<iframe width="170" height="150" src="https://www.youtube.com/embed/videoseries?list=PLfOyXtmFprMPe6ybXpoOxewJLLkyhhJSI&autoplay=1&rel=0" frameborder="0" style="display:scroll;position:fixed;bottom:425px;right:10px;z-index:99999999" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

list=PLfOyXtmFprMPe6ybXpoOxewJLLkyhhJSI

 

이런 식으로 되어있는 게 재생목록 ID입니다. 각각 재생목록의 아이디를 수정하면 되겠죠.

 

&autoplay=1&rel=0은 주소 뒤에 있는데 자동재생과 반복 재생하겠다는 의미가 되겠습니다.

 

자동재생을 하지 않으려면 &autoplay=1을 제거하시면 되겠고

 

반복 재생을 하지 않으려면 &rel=0을 제거하시면 되겠습니다.

 

style="display:scroll;position:fixed;bottom:425px;right:10px;z-index:99999999"

 

위 태그는 이제 오른쪽 화면에 고정시키는 건데 제거하셔도 되고 수정하셔도 됩니다.

 

유튜브 고객센터에 더욱 자세한 설명이 나와있습니다.

 

https://support.google.com/youtube/answer/171780?hl=ko

동영상 및 재생목록 퍼가기 - YouTube 고객센터