유튜브 반응형 영상 링크 삽입(embed) 소스

유튜브를 웹페이지에 삽입하고 싶다면

해당 영상 하단에서 [공유] - [퍼가기] 를 눌러 다음과 같은 화면의 코드를 복사하는 것이 일반적이다.

하지만 코드 위쪽에 적혀 있듯, 이 코드는 폭과 높이가 고정된 아이프레임 태그라

혹 이용자의 화면이 그것보다 작을 경우 제대로 표시되지 않고 화면의 경계를 넘어가게 된다.

어느 화면에서든 맞도록 자동으로 늘었다 줄었다 하는 기술을 반응형Responsive 이라고 부르며

유튜브 화면 역시 반응형으로 공유가 가능하다.

여러 방법이 있지만, 다음 사이트에서 변환하는 것이 가장 간단하다.

http://embedresponsively.com/

사이트 이름부터 매우 직관적이다.

들어가면 다음과 같이 간단하고 아름다운 화면이 나타난다.

YouTube Page URL 이라고 쓰인 곳 아래에 입력된 링크를 지우고 우리가 원하는 영상의 주소를 붙여넣은 뒤

오른쪽의 [Embed] 버튼을 누르면 모든 과정이 완료된다.

위와 같이 아름다운 코드가 자동으로 출력된다.

위 코드를 복사하여 원하는 웹페이지에 HTML 형식으로 붙여 넣으면

해당 영상이 반응형으로 웹페이지에 삽입된다.

끝.