반응형, 유튜브 동영상 자동 크기 조절 방법

유튜브 동영상 반응형으로 첨부하자

이미 오래 전에 소개했다고 생각했습니다. 유튜브 동영상을 반응형으로 첨부하는 방법을요. 글에 유튜브 동영상을 첨부할 때가 있는데요. 유튜브에서 제공하는 아이프레임 소스를 사용하면 모바일이나 작은 화면의 기기에서 유튜브 동영상이 본문을 뚫고 삐져나오거나, 보기 힘들 정도의 비율로 나오는 경우가 있습니다. 세로로 촬영한 동영상이 특히 심한데요.



반응형 유튜브 동영상


유튜드 동영상을 방문자들의 화면 크기에 맞게 자동으로 조절되도록 만들 수 있습니다. 반응형 스킨처럼 말이지요.




유튜브 동영상을 글에 첨부할 때 반응형으로 넣게 되면, 화면이 큰 모니터를 사용하는 PC로 접속하면 위와 같이 유튜브 동영상은 본문 너비 정도의 크기로 보여 집니다.




화면이 작은 태블릿 PC 등에선 이렇게 보여지고요. 스마트폰으로 방문한 사용자들에게 사용하는 모바일 기기의 화면 크기에 맞게 자동으로 리사이즈 된 크기로 보여지게 됩니다.



티스토리 서식


티스토리 블로그의 경우는 반응형 유튜브 소스를 서식으로 만들어 놓고 사용하면 편합니다. 저도 서식으로 만들어 놓고 사용하고 있는데요. 미리 만들어 놓은 서식 추가한 후 동영상 소스 넣어 주고 있네요.



css


반응형 유튜브를 구현하려면 .css에 위와 같이 두 줄의 소스가 추가 되어 있어야 합니다. 반응형 유튜브 동영상 소스 및 서식은 아래쪽에 넣어 두었으니 복사하여 사용하시면 되겠습니다.


반응형 유튜브 동영상 소스 및 서식


티스토리 블로그의 경우는 위쪽의 .video-container로 시작하는 소스들은 HTML/CSS 편집 > CSS에 추가해 주면 됩니다. CSS 마지막 줄 아래에 추가해 주면 되네요. 아래쪽의 <div class="video-container">동영상 소스 코드</div>는 글에 동영상을 첨부할 때 사용하시면 됩니다. '동영상 소스 코드'를 유튜브 아이프레임 소스 등으로 변경하면 되네요.




반응형 유튜브 동영상의 실제 적용 모습은 위와 같습니다. 어떤 기기로 방문하든 화면 크기에 맞게 대응하게 됩니다. PC로 접속하셨다면 브라우저 너비를 조절하며 반응형 유튜브의 똘똘함을 살펴 보시면 되겠습니다. 그런데요. 트와이스 Heart Shaker 뮤직비디오 보며 살펴 보실 수 있으신 거에요? 진짜? 끝~


©꿈속으로(mongri.net), 무단전재 및 재배포 금지. 공유와 직접 링크를 선호합니다.
[저작권 규약, 운영 원칙 및 이용자 준수 사항]