처음 개인이 개발하여 세상에 빛을 보게된 동영상 서비스 유튜브가 구글이 운영을 맡으면서부터 매일 1억 이상의 조회수를 기록하고 있다. 이제는 유튜브를 모르는 사람이 없을 정도. 눈으로 보이는 모든것이 다 있다고 해도 과언이 아닐 정도로 진작부터 전 세계인이 즐겨찾는 서비스가 되었다.
유튜브 반응형 코드 만들기
스마트폰이나 테블릿 PC등의 모바일기기들의 보급도 가속화 되면서 이제 마음만 먹으면 어디서든 유튜브의 동영상 콘텐츠를 즐길 수 있게 되었고 이렇다보니 동영상을 제작하는 일반인도 매우 많아졌다.
이번 시간에는 자신의 블로그나 인터넷 게시판에 유튜브 동영상을 올렸을 경우, 자신의 스마트폰등 모바일 화면에서 영상이 너무 크거나 잘려 나오는 경우, 이를 제대로 보이게 하는 방법을 설명하고자 한다. 즉 데스크탑과 모바일 두 모드를 자동으로 인식하여 크기가 조절되는 반응형 코드를 만드는 방법.
▲ 일반적인 방법
유튜브 시청시 해당 영상에 마우스 커서를 두고 마우스 우측 버튼을 누르면 관련 창이 나타난다. 여기서 소스코드를 복사하여 다른곳에서 사용하게되면 모바일 영상의 경우 게시판의 영역을 침범하는 경우가 있다.
▲ 일반 테스크 탑 화면
즉 데스크탑에서는 아무런 문제없이 사이즈가 적절하게 출력이되나..
▲ 모바일 화면
이렇듯 모바일 화면에서는 영상의 범위가 오른쪽으로 크게 밀려나 버리는 것이다.
이럴땐 자체 소스코드를 사용하지 말고 반응형 코드를 이용해 HTML 편집기에 붙여주면 바로 해결이 가능하다. 직접 해당 동영상의 URL 주소를 반응형 코드로 만들어 해결하는 방법이 있고 편리하게 반응형 코드로 변환해주는 사이트를 이용하는 방법도 있다.
그렇다면 반응형 소스로 변환해 주는 사이트를 방문해 코드를 만들어 보도록 하자. 주소는 다음과 같다.
▲ 해당 동영상 주소입력
위의 주소를 클릭하면 위와 같은 화면이 나온다. 그리고 주황색칸에 해당 유튜브 동영상의 URL을 복사하여 붙여넣는다(소스코드를 복사하여 붙여넣으면 안됨)
붙인 후 바로 오른쪽 파란색 Embed 박스를 클릭하자.
▲ 유튜브 반응형 코드
그러면 Embed code 칸에 반응형 유튜브 코드로 변환되어 나타난다. 이를 복사하여 자신의 홈페이지 HTML 편집기나 여타 게시판 HTML 편집을 통해, 넣고 싶은 부분에 붙인 후 저장하면 끝.
▲ 모바일 화면
모바일에서 확인했더니 비로소 영상이 커지지 않고 사이즈가 잘 맞추어진 모습이다. 물론 일반 데스크탑에서도 보면 데스크탑에 맞추어 정상 출력된다.
관련글 더보기
