구글 블로그 위젯 유튜브 영상을 다른 영상으로 바꾸는 법

내가 현재 사용하고 있는 Amalia 템플릿에는 이렇게 사이드바에 유튜브 플레이어가 있다.

Subscribe Us(구독하기)라고 쓰여있는 걸 보니, 이 위젯의 용도는 본인의 유튜브 채널의 대표 영상을 올려두는 곳인 것 같다.

블로그와 함께 유튜브 채널도 키우는 중인 사람에게는 정말 유용할 것 같은 위젯이다.

본인의 블로그에서 본인의 유튜브 채널을 홍보할 수 있다니, 정말 멋진 기능이다!

어쨌든 이번에는 이 위젯에 올릴 유튜브 영상을 변경하는 방법과 그 과정에서 발견한 중요한 사실에 대해서 정리해 보겠다.

구글 블로그 사이드바의 유튜브 영상 교체 방법

블로그 관리 페이지의 왼쪽 메뉴 '레이아웃'으로 이동 후에 수정할 위젯을 찾는다.

사이드바 쪽에 아까 봤던 Subscribe Us가 보인다.

수정하기 위해서는 연필 아이콘이 있는 작은 버튼을 클릭해야 한다.

그러면 이런 코드들이 나온다.

여기서 파란색으로 체크한 data-id 속성의 값을 바꾸면 영상이 바뀐다.

기존의 data-id를 지우고, 바꾸려고 하는 다른 영상의 ID를 넣어야 한다.

영상을 찾기 위해 유튜브로 갔다.

복면가왕에서 '앤틱 거울'이라는 닉네임으로 엄청난 무대를 보여줬었던 가수 양파 님의 영상을 가져와 보겠다.

위의 이미지처럼 영상의 ID는 URL을 통해서 확인할 수도 있고, '공유' 버튼을 클릭해서 확인할 수도 있다.

파란색 네모로 표시해 놓은 특수 문자로 감싸져 있는 ID를 복사해서, 아까 전의 위젯에 원래 있던 ID를 지우고 그 자리에 붙여 넣고 저장하자.

그리고 블로그를 확인해 보면, 이렇게 영상이 바뀌어 있다.

주의: 이 유튜브 영상 위젯을 함부로 삭제하면 안 된다

유튜브 영상을 바꾸는 과정에서 알게 된 사실인데, 이 위젯을 함부로 삭제해서는 안된다.

구글 블로그에서 유튜브 영상 반응형으로 만드는 방법

구글 블로그에 유튜브 영상을 삽입했지만 플레이어의 크기가 부자연스럽나요? 이 글은 유튜브 플레이어를 모든 화면 크기에 맞춰 반응형으로 만드는 방법을 알려줍니다. 복사와 붙여넣기만 하면 되는 간편한 HTML과 CSS 코드로 깔끔한 블로그를 만들어 보세요.

이전에 이와 같은 글을 쓴 적이 있다.

블로그 내에서 유튜브 플레이어를 반응형으로 만드는 방법을 다룬 글이다.

여기서 Amalia 템플릿에는 유튜브 영상을 반응형으로 만들어 주는 CSS 코드가 처음부터 있다고 했었는데, 그 코드가 이 위젯에 있는 코드였었던 것이다.

블로그의 HTML 편집 안에 있는 코드랑 이 위젯의 코드는 동기화가 되어있다.

그래서 이 위젯을 삭제해 버리면, 유튜브 영상을 반응형으로 만들어주는 CSS 코드들도 다 함께 삭제가 되어버리는 것이다.

참고로 '이 위젯 표시' 토글 스위치를 꺼도 마찬가지다.

적어도 코드들이 삭제가 되는 불상사는 일어나지 않지만, 위젯이 표시되지 않으면 CSS 코드들도 비활성화되면서 블로그 본문에 올려놨었던 유튜브 영상들이 또 처음의 이상한 모양으로 돌아가버리고 만다.

그러니 블로그 내에서 유튜브 영상을 반응형으로 만들기 위해서는 둘 중 하나를 택해야 한다.

하나는 이 유튜브 영상 위젯을 어떤 용도로든 반드시 사용하거나,

또 하나는 위젯에 있던 코드들을 잘라낸 다음에 HTML 편집으로 들어가서, 템플릿 전체 CSS 코드를 넣는 부분으로 CSS 코드를 이동하고, 자바스크립트 코드도 적절한 곳으로 이동해야 한다.

구글 블로그에서 유튜브 영상을 삽입하는 가장 효율적인 방법

구글 블로그에 유튜브 영상을 가장 효율적으로 삽입하는 방법을 알려드립니다. 지연 로딩(Lazy Loading) 기술을 활용해 블로그 로딩 속도를 높이고, 플레이어 디자인을 바꾸는 법과 영상 시작 시간을 설정하는 팁을 담았습니다.

유튜브 영상 위젯에 있는 자바스크립트 코드가 어떤 역할을 하는지는 이 글을 확인하자.

아주 중요한 내용이다.

마지막으로 유튜브 영상 위젯을 사이드바에서 푸터로 옮겨보자

블로그에 본인의 실제 유튜브 채널을 홍보하는 목적이라면 유튜브 영상이 사이드바에 있는 것이 가장 좋겠지만, 그런 목적이 아니라면 스크롤을 마지막까지 내려야 겨우 보이는 푸터^Footer 쪽에 두는 게 가장 나을 것 같다.

그런데 번역이 잘못 됐나..?

위젯^widget도 아니고 '가젯 추가'는 도대체 무슨 말인지..

어쨌든.. 하단의 푸터 쪽의 '가젯 추가'를 누르고 'HTML/자바스크립트'를 클릭한다.

그리고 사이드바에 있던 유튜브 영상 위젯에 있던 코드를 그대로 복사・붙여넣기 하면 된다.

완료~!

앞으로 양파 님 노래 듣고 싶을 때마다 여기서 재생해야지~ 🎶

참고로 여기서 음악을 재생해 봤자 도중에 블로그의 다른 링크를 클릭해서 페이지 이동을 하면 유튜브 영상도 꺼진다.

그러니 이것을 BGM 플레이어로 이용하는 것은 방문자들에게는 딱히 의미도 없고, 정말 본인이 유튜브 채널도 운영한다면 그 채널을 홍보하는 역할로 쓰는 것이 제일 좋을 것 같다.

유튜브 동영상 썸네일 이미지에 alt 속성을 추가하자

이제 진짜 마지막이다.

위젯의 자바스크립트 코드 안에 이런 코드를 넣어주자.

이건 유튜브 영상 플레이어에 처음에 뜨는 썸네일 이미지에 alt 속성을 넣어주는 코드다.

모든 이미지에는 웬만하면 alt 속성을 넣어주는 것이 좋다.

그 이유는 다음 포스트에서 설명하겠다.

어쨌든 위의 이미지를 참고해서 딱 저 부분에 다음의 코드를 넣도록 하자.

/* alt 속성 추가 */
thumbNode.setAttribute("alt", "유튜브 동영상 썸네일");

이것으로 유튜브 영상 위젯과 관련된 모습 작업은 끝났다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.