티스토리에 유튜브 동영상을 반응형으로 넣어보자

안녕하세요 토로토 입니다. 

요즘 블로그나 웹사이트들은 대부분이 반응형 스킨을 사용하고 있는데요, 저 역시 반응형 스킨을 사용하고 있습니다. 최근 들어 유튜브 동영상을 넣은 포스트를 몇개 작성했는데요, 한가지 문제가 생겼습니다. 글과 사진들은 브라우저 크기에 따라서 자동으로 크기가 조절이 되었는데요, 동영상은 조절이 되지 않고 처음 설정된 크기 그대로 고정되어 있었습니다. 그래서 유튜브 동영상을 반응형으로 만들기 위해 여러가지 방법을 찾아보았는데요, 그중 제가 사용하기로 한 방법을 알려드리려 합니다. 

이미지 출처: domawe

제가 찾아본 결과 유튜브 동영상을 반응형으로 넣을수 있는 방법은 두가지가 있었습니다. 하나는 html/css 편집기에 코드를 넣어서 유튜뷰 동영상 코드들을 저절로 바뀌게 하는 방법과, 다른 하나는 온라인 사이트를 이용해 직접 반응형 코드를 만드는 방법이었습니다. 처음에는 편리성을 위해 첫번째 방법으로 해보려 했는데, 왜인지 모르겠는 이유로 코드를 추가해도 유튜브 동영상들이 반응형이 되지 않더라고요. 그래서 어쩔수 없이 번거롭지만 사이트를 이용하는 방법을 사용하기로 했습니다. 

먼저 유튜브 사이트로 들어가서 포스트에 추가할 동영상을 찾아줍시다. 그 다음, "마우스 우클릭 > 동영상 URL 복사" 를 클릭해서 동영상 링크를 복사해 주세요. 

유튜브: https://www.youtube.com/

그 다음에는 Embed Responsively 라는 사이트에 들어가 줍시다. "Youtube Page URL" 에 방금 복사한 유튜브 동영상 링크를 붙여넣으신 후 "Embed" 버튼을 클릭해 주세요. 참고로 유튜브 동영상뿐 아니라 Vimeo, Dailymotion, Google 지도 등 여러가지 메체들을 반응형으로 만드실수 있습니다.

 

Embed Responsively: http://embedresponsively.com/

"Embed" 버튼을 클릭하시면 아래 사진처럼 코드가 만들어 집니다. 이 코드를 복사해 줍시다. 

이제 이 코드를 포스트에 추가해야겠죠. 글쓰기 창에서 오른쪽 상단에 있는 "html" 을 클릭해서 html 수정창으로 들어가 줍시다. 그 다음 원하시는 위치에 방금 복사한 코드를 추가해 줍시다. 

그러면 이제 브라우저 크기가 바뀌면 유튜브 동영상도 따라서 바뀌는걸 보실수 있습니다.  

이상으로 포스팅을 마치겠습니다.

관련 글

유튜브 동영상을 mp3 로 다운로드 받아보자