유튜브 동영상 반응형으로 블로그 올리는 방법

티스토리에 유튜브 동영상을 올릴 경우가 종종 있는데요, 최근 티스토리에 반응형 스킨이 많아지면서 좀 더 깔끔하게 올리고 싶었습니다. 물론 유튜브에서 제공하는 코드를 그대로 올려도 되지만 저는 유튜브 동영상도 반응형으로 올려보고 싶었습니다.


간단하게 유튜브 동영상을 반응형 코드로 변경해서 블로그 포스팅에 활용할 수 있는 방법이 있습니다. 물론 웹언어를 잘 아시는 분들은 코드를 직접 수정해서 올릴 수 있지만 저처럼 잘 모르시는 분들을 위해서 포스팅을 해봅니다.


유튜브 동영상 반응형으로 블로그 올리는 방법유튜브 동영상 반응형으로 블로그 올리는 방법


유튜브 동영상 반응형으로 블로그 올리는 방법



우선 유튜브에서 블로그 포스팅에 활용할 동영상을 하나 찾아보겠습니다.

저는 요즘 NBA에서 가장 핫한 '커리'동영상 하나를 올려보도록 하겠습니다. 공유부분에서 동영상 주소를 복사합니다. ▲



그 후에 embedresponsively 사이트에 접속합니다. 접속하면 위와 같은 화면을 볼 수 있습니다. 유튜브 뿐만 아니라 Vimeo, Dailymotion 등 다양한 서비스들을 반응형 코드로 변환할 수 있습니다. 아까 유튜브 동영상 주소를 입력하고 Embed 버튼을 클릭합니다. ▲



변환은 순식간에 되고 변환이 되면 동영상과 함께 아래 반응형으로 변환된 Embed code를 볼 수 있습니다. 이 코드를 모두 복사합니다. 



그리고 티스토리 블로그 글쓰기 '외부컨텐츠'를 클릭해서 멀티미디어 첨부를 합니다. 



짜잔~깔끔하게 반응형으로 잘 나오죠? ▲


이상 "유튜브 동영상 반응형으로 블로그 올리는 방법"이었습니다.


댓글(2)
  1. Favicon of http://sonylove.tistory.com BlogIcon SONYLOVE 2016.01.12 17:16 신고 댓글주소  수정/삭제  댓글쓰기

    가끔 유튜브의 동영상을 올리는데 유용하게 사용할 수 있을꺼 같아요. 감사합니다.

    • Favicon of http://withoutwax.tistory.com BlogIcon LoveisMagic 2016.01.12 17:56 신고 댓글주소  수정/삭제

      유용하게 사용하실 수 있을 것 같네요, 저도 이 사이트를 알고 나서 블로그에 올리는 동영상은 모두 반응형으로 바꿔서 올리고 있습니다.
      :-)

티스토리 툴바