모바일 웹페이지에서 유투브(YouTube) 동영상 짤림 문제

오늘 그동안 찍어뒀던 고양이 동영상을 전부 유투브에 업로드 했습니다.

그리고 블로그에 글 작성할때 소스코드를 넣어서 첨부를 했죠.

제 블로그 가로폭이 730이여서 유투브 프레임 사이즈를 730*480 로 설정해서 블로그에 적용했더니 

pc버전에서는 별 문제 없이 잘 되었습니다.

모바일에서도 잘 보이려나 하고 들어갔더니 헐..

유투브 동영상플레이어 반절이 짤리네요

티스토리 유투브 동영상 플러그인을 사용하면 된다는 글을 찾을 수 있었으나

플러그인을 이용하여 유투브 동영상 검색 시

썸네일 이미지만 딸랑 보이고 무슨 동영상인지 알수가 없습니다

플러그인은 포기..

해결방법은 매우 간단했습니다.

소스코드의 가로 폭 width 를 픽셀값으로 주지 않고 퍼센트로 설정하면

모바일 페이지에서도 비율에 맞게 출력됩니다

width="730" 으로 설정되어있는 값을

<iframe width="730" height="480" src="유투브 동영상 주소" frameborder="0" allowfullscreen></iframe>

width="100%" 로 바꿔주면 모바일 웹 페이지에서도 정상적으로 나옵니다

<iframe width="100%" height="480" src="유투브 동영상 주소" frameborder="0" allowfullscreen></iframe>

pc화면에서는 위의 두 동영상이 동일하게 보이지만 모바일 웹 페이지에서는 다음과 같이 보입니다

가로넓이를 100%로 설정하면 짤리지 않고 다 나오는것을 보실 수 있습니다