유튜브 영상을 블로그에 올릴 때 PC 폰 사이즈에 맞게 자동으로 영상 크기를 조절하는 방법.

블로그에 유튜브 영상을 올릴 때,

누구나 때때로 실수를 합니다.

YouTube에서 제공하는 소스 코드를 가져다가 바로

게시물을 블로그의 HTML 편집기에 복사하여 게시하는 것이 보통인데요,

그런데, 계속 그렇게 할 경우 PC 화면과

유튜브 화면이 폰 크기에 자동으로 맞춰지지 않고,

유튜브에서는 소스코드에 초기 설정된 값대로만 영상이 재생되며,

화면이 잘리거나 너무 작게 표시되는 문제점들이 발생합니다.

하지만 해결책은 아주 아주 간단합니다.

아래 내용을 참고하시고 신청해주세요.

아래와 같은 원본 소스코드가 있다면,

 

 

 

반응형

 

위 그림의 빨간색 부분의 소스 코드에서,

아래와 같이 폭의 수치를 변경합니다.

width="1280" → width="100%"

이렇게 저장하면 PC 화면, 휴대폰 화면, 태블릿 화면 등에서

YouTube 동영상은 반응형으로 세팅되어 자동으로 크기가 조정됩니다.

이 때 가장 중요한 것은 바로. Width 부분만 100%로 변경해야 합니다. ...

만약 height까지 100%로 바꾸면 제대로 세팅이 되지 않습니다. ㅎㅎㅎ

이상으로 짧지만 강력한 소스 힌트였습니다.