유튜브 동영상 반응형 소스코드로 변환하기

제 블로그 스킨은 반응형입니다.

반응형은 모든기기, 즉 PC나 모바일 크기에 맞게 화면이 출력되는데요.

유튜브 동영상도 모든기기에서 반응형으로 출력되게끔 소스 코드를 변환해 주는 웹 페이지가 있어 소개합니다.

아래에 링크될 Embed Responsively란 사이트는 유튜브 외에 비메오, 데일리모션 등 동영상은 물론

구글 지도, 인스타그램 등 이미지도 반응형으로 변환해 주는 것 같은데요.

오늘은 유튜브 동영상에 대해서만 다루겠습니다.

1.

먼저 유튜브를 방문하여 반응형 소스 코드로 변환할 동영상을 선택합니다.

2.

동영상이 재생될 텐데요. 주소 창에 표시된 주소를 복사(Ctrl + C )합니다.

3.

☞ 이곳을 클릭하고 Embed Responsively로 이동하여 YouTube Page URL: 입력란에 기존 표시된 주소는

지운 후 내가 복사한 유튜브 동영상 주소를 붙여넣고( Ctrl + V ) Embed 버튼을 누릅니다.

4.

페이지가 확장되면서 미리보기 화면이 열리고 Embed code 박스 안에 변환된 소스 코드가 출력되는데,

드래그 복사하여 원하는 커뮤니티 게시판으로 가져가 붙여넣으면 되는데요.

5.

반응형으로 변환된 소스 코드에 옵션을 줄 수도 있습니다. 예를 들어...

rel=0 (추천 동영상 제거 옵션)

autoplay=1 (자동 재생)

loop=1 (무한 반복 재생)

vq=hd720 또는 vq=hd1080 (고화질 재생)

정리를 하자면...

Embed Responsively에서 변환된 소스 코드는...

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/MjSqxsyKWRw' frameborder='0' allowfullscreen></iframe></div>

입니다.위 빨간색으로 처리된 MjSqxsyKWRw는 동영상 고유 코드인데요.

MjSqxsyKWRw 뒤에 옵션을 넣어 주면 됩니다.

다시 예를 들어 변환된 소스 코드는 임베드가 아닌 아이프레임 방식으로 재생되는데요.

아이프레임 무한 반복 재생 옵션은 아래처럼 넣어 주시구요.

<iframe src="https://www.youtube.com/embed//동영상 고유 코드?rel&autoplay=1&loop=1&vq=hd720&playlist=같은 동영상 코드" frameborder="0" allowfullscreen=""></iframe>

Embed Responsively에서 변환된 소스 코드에 무한 반복 재생 옵션의 예제는 아래와 같으니...

참고하시면 될 것 같습니다.

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/MjSqxsyKWRw?rel&autoplay=1&loop=1&vq=hd720&playlist=MjSqxsyKWRw' frameborder='0' allowfullscreen></iframe></div>

옵션을 넣지않은 반응형 동영상(모든기기에서 알맞는 화면으로 재생됩니다.)