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

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

 

누구나 한번 씩 하는 실수가 있는데,

 

바로 유튜브에서 제공하는 소스코드만 긁어다가 바로

 

블로그의 HTML 편집창에 복사해서 글을 포스팅한다는 것.

 

그런데 이렇게 진행하면, PC 화면은 물론이고,

 

핸드폰 사이즈에 맞게 유튜브 화면이 저절로 조정이 되질 않고,

 

유튜브 상에서 소스코드에 맨처음 설정된 값대로만 동영상이 재생되게 되어 있어서,

 

화면이 잘리거나, 너무 작게 표시되는 등의 문제점이 발생한다.

 

그런데 그 해결책은 아주아주 간단하니까.

 

아래 참고해서, 그냥 적용만 시켜주길 바란다.

 

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

 

<iframe width="1280" height="721" src="~~~~~~~~~자신의 유튜브 소스 링크 주소~~~~~~~~~~~~~" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

위 빨간색 부분의 소스코드 중,

 

왼쪽의 width 부분만 아래와 같이 바꿔준다.

 

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

 

이렇게 바꾸고 저장하면, PC 화면이든 휴대폰 화면이든 태블릿 화면이든

 

유튜브 영상이 반응형으로 저절로 크기 조절이 되어 나온다.

 

이 때 주의할 점은, width 만 100%로 바꿀 것....

 

width가 아닌 height를 100%로 바꾸면, 예상치 못한 일이 발생할 것이니... ㄷㄷㄷㄷ

 

이만 짧지만, 강력한 소스팁 드렸습니다.

 

 

내용이 유익하셨다면, 구독 부탁드려요~