티스토리 반응형 스킨에서 유튜브, 카카오TV 동영상 등 등록방법 :: 엠원스킨

티스토리 반응형 스킨을 쓰게 되면 글작성시, 동영상을 삽입할 때 일반적인 공유 방법 소스를 사용하면 반응형에 최적화되지 않아서 동영상 리사이징이 제대로 구현이 안됩니다. 그래서 일그러지거나 위아래로 커진다거나 등 꼴사나운 모습으로 보여지는데요.

 

반응형 스킨에서는 그에 맞는 반응형 삽입 소스를 삽입해야 합니다. 그래야 리사이징이 제대로 구현되서 모바일, 태블릿이든 화면 사이즈에 맞게 자동으로 틀에 맞게 되서 잘 보여지는 것입니다. 엠원스킨의 엠원리액트 반응형 스킨에서 동영상을 반응형으로 삽입하는 방법을 알려드리겠습니다.

 

우선, 유튜브를 알아볼까요? 유튜브 공식사이트에서 동영상을 시청하게 되면 아래 사진처럼 동영상 주소가 저렇게 떠있는데요, 빨간줄표시 부분.. =표시 뒤쪽만 복사를 합니다. 이 주소가 동영상 고유ID라고 보시면 됩니다. 그런 다음 아래 첨부한 파일을 열어서 '주소'라고 되어 있는 부분에 아까 복사했던 내용을 붙여넣기 하시면 됩니다. 그런 다음 다시 전체소스를 복사해서, 글작성시 HTML모드로 들어가 원하는 위치에 넣어주시면 됩니다.

 

유튜브 동영상 반응형 삽입 소스.txt

 

 

 

이번에는 카카오TV 동영상을 알아보겠습니다. 유튜브랑 거의 비슷한데요, 아래 사진처럼 동영상 주소의 맨 마지막 숫자부분을 복사해서, 아래 첨부한 파일의 '주소' 부분에 넣어주시면 됩니다.

 

카카오TV 동영상 반응형 삽입 소스.txt

 

 

 

이번에는 네이버TV 동영상 그리고 그 외 동영상인데요, 네이버 동영상은 좀 다릅니다. 네이버 동영상을 시청하게 되면 아래 사진처럼 화면 하단 우측에 공유버튼이 보이는데, 그 버튼을 누르시고, 하단에 코드가 뜨면 '복사'를 눌러주시면 됩니다. 그리고 나서 아래 첨부파일의 소스에서 '주소' 부분에 아까 복사한 것을 넣어주시면 됩니다. 물론 소스의 가로, 세로 사이즈는 변경해주셔야 합니다. width는 728로, height은 410으로 수정해주세요.

 

기타 동영상 반응형 삽입 소스.txt

 

 

 

주의사항!!

주의 하실 점은, 동영상을 반응형 소스로 삽입해서 넣은 이후에, 글을 편집할 때 인데요. 띄어쓰기라든가, 다른 사진을 넣는다든가 하는, 일반적인 글편집 작업을 할 때, 해당 동영상소스의 div 앞뒤부분들이 다른 곳으로 이동할 수 있다는 점입니다. 예를 들어, 동영상 바로 위아래에서 띄어쓰기를 하게 되면 간혹 소스가 틀어질 수 있습니다. 그래서 HTML모드로 가끔 확인을 하셔서 소스가 제대로 있는지 보시고요, 이런 점을 방지할라면, 반응형 동영상 소스를 넣을시에 애초에 띄어쓰기 소스까지 같이 넣어주시는게 좋습니다. 띄어쓰기 HTML소스는 보통 <P>&nbsp;</P> 이 소스를 많이 씁니다.

 

몇 번 해보시면 경험이 생기실 겁니다. 반응형 스킨의 단점이기도 합니다. 반응형 스킨은 이렇게 티스토리 운영자가 귀찮을 수 있는 요소들이 좀 있습니다. 감수해야 하는 부분이죠 ㅎㅎ 어쨌든 제대로 소스를 삽입했으면 아래 사진처럼 모바일같은 곳에서 저렇게 리사이징이 잘 됩니다. PC에서도 확인하실 수 있습니다. 사이트 창을 줄였다가 늘렸다가 해보시면 됩니다.

 

 

댓글(0)

티스토리 툴바