음악 관련 글 쓴다고 유튜브 영상을 넣는데 티스토리 플러그인으로 재생 목록을 어떻게 추가하는지 모르겠더라고요. 앨범 전체 플레이리스트를 넣고 싶은데 검색으로 찾기 힘들고 그렇다고 다 합쳐놓은 영상을 넣고 싶진 않아서요. 그냥 코드 링크 바꿔서 반강제로 넣었습니다.
제대로 추가하면 아래 사진처럼 오른쪽 상단에 재생목록 버튼이 생깁니다. 여러 개로 쪼개진 영상을 한 번에 넣을 때 편리하겠죠.
시작 전에 [블로그관리 - 플러그인]에서 [유튜브 동영상 첨부]를 적용시켜주세요. 아마 티스토리에서 기본적으로 제공되는 스킨에는 자동으로 적용되어 있는 것 같아요.
1. 플러그인으로 아무 영상이나 검색해서 넣기.
글 편집기에서 유튜브 플러그인으로 아무 영상이나 넣습니다. 전 그냥 재생목록의 첫 곡을 넣어요.
2. 재생목록 공유 링크 복사하기
추가하고 싶은 재생목록을 찾습니다. 바로 첫곡이 재생되는 경우가 있는데 재생목록의 제목을 클릭하면 목록 창이 뜹니다.
공유 버튼을 클릭하면 링크와 함께 공유 방법이 뜨는데요. 바로 뜨는 링크는 무시하고 <> 아이콘의 [퍼가기]를 선택합니다. 바로 뜨는 링크도 복사해서 넣어봤는데 안 되더라고요.
그냥 저 코드 전체를 복사해서 html 코드에 넣어도 되지만, 그럼 티스토리의 유튜브 동영상 첨부 css가 적용되지 않아서 좀 귀찮아질 거예요. 해당 코드의 src의 값만 복사합시다. 제가 드래그한 부분입니다.
3. HTML 모드에서 링크 수정하기
글 편집기에서 [기본모드]를 [HTML]로 변경합니다. 1번에서 첨부한 유튜브 영상 코드를 찾아주세요. 아래와 같은 형식입니다.
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="링크 위치1" data-video-thumbnail="https://scrap.kakaocdn.net/dn/dUiTmz/hyLPtUADH3/PxgJMH2skfPbTxkbGypsuK/img.jpg?width=1280&height=720&face=588_128_690_238" data-video-width="860" data-video-height="484" data-video-origin-width="860" data-video-origin-height="484" data-ke-mobilestyle="widthContent"><iframe src="링크 위치2" width="860" height="484" frameborder="0" allowfullscreen="true"></iframe>
제가 "링크 위치"라고 적은 곳에 기존에 추가한 영상 링크가 적혀 있을 텐데요. 그걸 2번에서 복사한 재생목록의 링크로 바꾸면 됩니다. <figure> 태그의 'data-video-url', <iframe> 태그의 'src' 두 군데니까 잘 확인하세요!
※주의할 점
재생목록 링크는 다음과 같은 형식입니다.
https://www.youtube.com/embed/videoseries?list=재생목록의 아이디
보시면 링크 중간에 '?'가 있는데요. 확신할 수는 없지만 이걸 티스토리 편집기에서 오류라고 인식하는 것 같아요. 아까 보신 코드에서 "링크 위치1"은 괜찮은데 "링크 위치2"는 편집할 때마다 "https://www.youtube.com/embed/videoseries" 까지만 나오고 뒷부분이 없어집니다. 링크를 넣고 나서 바로 저장하면 상관없습니다!
웬만하면 재생목록 추가를 맨 마지막에 하고, 나중에 글을 수정할 일이 생길 때마다 HTML모드에서 링크가 제대로 쓰여 있는지 확인하셔야 해요. "링크 위치1"에 있는 걸 바로 복사해서 넣으면 됩니다.
좀 번거로운데 딱히 해결방법은 없는 것 같아요.
아래는 예시로 추가한 재생목록입니다. 제가 좋아하는 파리의 연인 OST모음집입니다.ㅎ
어릴 때 가족들이랑 정말 재밌게 봤는데 드라마 내용과 별개로 OST가 정말 좋았어요.
과정이 조금 귀찮지만 이렇게 할 수밖에 없네요.
'기록 ⁺₊' 카테고리의 다른 글
티스토리 사이드바에 프로필 위젯 만드는 방법 (0) | 2021.10.26 |
---|---|
애드센스 height: auto !important; 강제 삽입 문제 (0) | 2021.10.20 |
해외 수입 우유 추천 - 아르보리아 멸균우유 리뷰 (0) | 2021.10.18 |
티스토리 구독 버튼 만드는 방법 (0) | 2021.10.09 |
외주 펑크 낸 일러스트레이터 목록 - 공론화/사과문 정리 (0) | 2021.09.19 |
댓글