모든 디바이스에 최적화된 유튜브 동영상 퍼올리기

이전 포스팅에서는 모든 디바이스에 반응형으로 작동되는 티스토리 블로그에 한정된 코드 삽입 팁을 알아 보았는데요.

모든 디바이스에 최적화된 "유튜브동영상" 게시하는 팁

오늘은 대부분의 커뮤니티 게시판에 반응형으로 적용되는 소스 코드로 변환해 주는 온라인 웹 사이트 한곳을 소개할까 합니다.

코드 변환 방법은 진짜 초간단인데요.

유튜브에 접속, 변환할 동영상을 선택하고 주소창에 표시된 동영상 주소를 복사(Ctrl + C)하시구요.

복사된 동영상 주소를 가지고 아래 링크된 Embed Responsively라는 웹 페이지에 접속하여 URL입력란에 복사된 동영상 주소를 붙여넣기(Ctrl + V)한 후 Embed 버튼을 누릅니다.

☞ Embed Responsively.com

동영상 미리보기 화면이 열리고 하단 Embed code: 란에는 변환된 코드가 생성되는데요.

변환된 코드를 드래그 복사해 공유할 커뮤니티 게시판으로 이동합니다.

Embed Responsively에서 변환된 소스 코드를 티스토리 블로그의 경우 동영상이 삽입될 부분에서 글쓰기 에디터의 외부컨텐츠 탭을 눌러 창이 열리면 소스입력란에 복사된 소스 코드를 붙여넣고 확인 버튼을 누르면 해당 동영상은 모든 디바이스 규격에 최적화된 반응형으로 업로드됩니다.

그런데 티스토리 블로그를 제외한 다음 카페나 블로그 등 외부 커뮤니티 페이지에서는 글쓰기 에디터의 외부컨텐츠 기능을 사용하지 못할 수도 있는데요.

그런 커뮤니티 게시판은 글쓰기 창에서 HTML 모드로 들어가 소스 코드를 직접 붙여넣으면 되구요.

유튜브 주소창에서 따온 동영상 주소를 Embed Responsively에서 변환해 커뮤니티 게시판에 올리면 기본적으로 동영상 재생이 끝나면 추천 동영상이 아래 샷처럼 표시되는데요.

저는 유튜브에서는 어쩔 수 없지만 퍼온 동영상에 추천 동영상이 표시되는 걸 싫어 합니다.

추천 동영상이 표시되는 걸 원치 않으면 아이프레임 소스 코드 동영상 고유 코드 뒤에 ?rel=0를 입혀주면 추천 동영상은 표시되지 않습니다.

 <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/fK1vXbXWuVA?rel=0' frameborder='0' allowfullscreen></iframe></div>