반응형 유튜브 영상을 블로그에 첨부하는 간편한 방법

블로그에 게시글을 쓰다 보면 유튜브 영상을 첨부하고 싶을 때가 있다.

글의 내용을 더 풍부하게 할 수 있고, 디자인 측면에서도 글씨만 있는 것보다는 훨씬 좋다.

일반적인 방법으로 유튜브 영상을 첨부하게 되면 반응형 스킨이 적용된 블로그의 경우, 작은 디바이스에서는 화면이 잘려서 출력된다. 그래서 반응형으로 유튜브 영상을 글에 첨부하는 법을 공유하고자 한다.

바로 유튜브 링크를 반응형으로 첨부할 수 있게 바꿔주는 사이트를 이용하는 것이다.

첨부된 사진을 누르거나 링크를 눌러서 접속! : http://embedresponsively.com

위 사이트에서는 유튜브 동영상을 반응형으로 첨부할 수 있는 코드를 생성해준다.

아래에서 사진과 함께 방법을 설명하겠다.

우선 글에 넣고 싶은 유튜브 링크를 복사해 놓는다.

http://embedresponsively.com에 접속해서 주소를 붙여넣기 한다음 embed 버튼을 누른다.

그러면 아래에 코드가 뜨는데, 이 코드를 복사해 놓는다.

그 다음, 티스토리 글쓰기로 들어간다.

우측 상단에 html 박스에 체크를 하면 위와 같은 화면이 나오게 된다.

이 때, 넣고 싶은 위치에 복사해두었던 embed code를 붙여넣기 하면 된다.

여기서 html에 대해서 잘 모르면 헷갈릴 수도 있고, 이상한 곳에 잘 못 붙여넣기 하면 문서 자체가 망가질 수도 있다.

그래서 html에 대해서 잘 몰라서 함부로 붙여넣기가 어렵다면, 동영상을 넣고 싶은 위치에 enter를 눌러서 <p><br/></p>를 생성시킨 다음 이 다음에 영상을 붙여넣기 하면 된다.

html에 대해서 따로 배우지 않은 내가 알아낸 편법?이다.

과정을 제대로 따라했다면, 영상이 글에 제대로 첨부된 것을 볼 수 있다.

*주의할 점은, 영상을 첨부한 채로 문서 전체의 글자 크기를 바꾼다면, 첨부한 영상 역시도 크기가 고정되어 출력되게 된다. 그렇게 되면, html 코드를 수정하는 법을 모르는 나 같은 일반인은 붙여넣기 했던 코드를 지우고 다시 붙여넣기를 하면 원래대로 돌아온다. 그래서 반응형 영상을 첨부한 뒤에는, ctrl+a 와 같은 문서 전체 편집에 주의해야 할 필요가 있다.

여러분들의 블로그 편집에 조금이라도 도움이 되었길 바라며,

도움이 되었다면 공감과 댓글을 눌러주면 좋을 것 같다.