블로그를 하다보면 유튜브, 네이버, 카카오 등에서 제공하는 영상을 글을 첨부하는 경우가 있습니다.
퍼가기 기능에서 나오는 “코드”만 삽입하면 내 블로그나 홈페이지에서 쉽게 올릴 수 있습니다.
하지만 이 방법은 영상 크기가 “고정”으로 설정되는 경우가 대부분입니다.
예를 들어 “600 X 480”으로 영상이 설정되면 어떤 환경이든 화면 사이즈가 “600 X 480”으로 보입니다.
가로길이가 "300"짜리 휴대폰에서 해당 영상을 시청하게 된다면 "300 X 480" 사이즈로 영상이 재생됩니다.
그럼 해결책은??
“반응형 박스” 를 구성하여 영상코드를 넣어주면 됩니다.
반응형으로 일정한 비율을 유지하는 가상의 박스를 만들어주는 것으로 해결할 수 있습니다.
코드를 직접 짜라고 하면, 전공자나 전문가가 아니고서는 쉽지 않을 텐데요.
이것을 쉽게 해주는 사이트가 있습니다.
이 사이트에서 “유튜브 영상”이나, “구글 지도”의 주소를 넣기만 하면, 그대로 반응형 소스로 만들어 줍니다.
1. http://embedresponsively.com/ 에 접속합니다.
2. 사용할 영상의 URL을 복사-붙여넣기 한 뒤 Embed 버튼을 눌러주세요.
3. 아래 해당 영상과 함께 반응형 소스가 보입니다. 이걸 그대로 복사해서 사용하시면 됩니다. 간단하죠?! ㅎㅎ
EMBEDRESPONSIVELY는 해외에서 운영하는 사이트로, 주로 유튜브에 최적화 되어 있지만
네이버, 카카오에서 가져온 영상에서도 코드만 조금 수정하면 적용이 가능합니다.
위의 박스에 있는 코드에서 “<iframe src=....”에서 “</iframe>”에 해당하는 부분만 영상코드로 변경해주면
반응형으로 작동하는 영상을 첨부할 수 있습니다.
읽어주셔서 감사합니다.
최근댓글