[정보] 유튜브 동영상 반응형으로 올리기

오늘은 유튜브 영상을 반응형으로 올리는 방법에 대해 알아보겠습니다.

원래 저는 embed태그를 사용해서 width와 height을 직접 지정해서 올렸었는데요. 스킨을 바꾸니 글 너비 밖으로 빠져나가는 문제가 발생했습니다. 그래서 혹시 하고 모바일에서 확인해보니 모바일에서도 같은 증상이 있어서, 당시 포스팅한 글이 얼마 안 됐기에 모두 빠르게 수정을 하였습니다.

 

 

 

월드워Z 플레이 후기글을 임의로 이전 방식대로 글을 올렸을 때 모습입니다. 보시다시피 원래라면 빨간 사이즈로 나와야 하는데 글의 영역을 넘어 지정한 크기대로 나오는 것을 보실 수 있습니다. 그렇다면 어떻게 해야 하는지 아래에 두 가지 방법을 알려 드리겠습니다.

 

 

첫 번째, 반응형 변환 사이트를 이용하는 방법.

http://embedresponsively.com/

embedresponsively.com

위 사이트에서 동영상 주소를 붙여 넣기 하여 embed 버튼을 누르면 반응형 태그로 변환되어 나옵니다. 하지만, 티스토리 블로그에 올리려고 하시는 분들에게는 추천드리지 않는 방법이에요.

왜냐하면, 저 태그의 방식은 css를 태그에 때려 넣은 방식이기 때문에, 티스토리의 경우 글을 수정하게 되면 스타일이 날아가서 글을 수정할 때마다 스타일을 다시 넣어주거나, 동영상을 다시 변환하여 넣어줘야 하는 번거로움이 있습니다.  

 

제가 추천드리는 방법은 두 번째 방법인데요.

 

 

두 번째, CSS를 따로 빼서 만드는 방법.

이 방법은 위의 태그 중 스타일 부분을 css로 빼서 옮기고, <iframe> 부분만 남기는 방법입니다.

 

 

 

실제 제 css 부분입니다. 위 사이트에 있는 css를 그대로 빼버렸죠? 이대로 일단 css를 넣어주세요. 물론 클래스명이 마음에 안 드시는 분은 바꾸셔도 됩니다. 전 그냥 저 홈페이지에서 만들어준 이름을 그대로 사용했습니다.

 

반응형 유튜브 css.txt

0.00MB

태그에서 코드 따오기 귀찮으신 분은 위 텍스트 파일을 그대로 쓰시면 됩니다.

 

 

 

글을 쓸 땐 HTML모드에서 이런 식으로 쓰시면 됩니다.

여기서 주소 뒷부분이란?

 

 

 

여기서 저 빨간 네모에 해당하는 부분을 넣어주시면 됩니다.

 

반응형 유튜브 태그.txt

0.00MB

마찬가지로 태그 텍스트 파일을 첨부하니, 사용하실 때마다 영상 주소만 붙여 넣기 해서 쓰시면 됩니다.