티스토리 모바일에서 유투브(youtube) 동영상화면 크기문제

티스토리 모바일에서 유투브(youtube) 동영상화면 크기문제

안녕하세요. 매의눈입니다.

금일은 모바일에서 블로그 페이지 내 유투브 동영상을 봤을때

화면비율이 안맞는 문제를 해결해볼까 합니다.

우선 참고사진부터 보시겠습니다.

먼저, PC화면에 나오는 유투브 동영상 크기.

다음은 모바일화면에서 보이는 유투브 동영상 크기.

차이점을 아시겠나요?

모바일화면에서 보면 위 사진과 같이 가로화면 비율이 안맞기 때문에

제대로 된 영상을 시청할 수가 없습니다.

그럼 어찌해야 할까요?

방법은 바로 소스코드에서 가로사이즈를 100%로 하면 됩니다.

소스를 한번 수정해보겠습니다.

이와 같이 유투브 동영상 소스에서 width 값을 px 값이 아닌 퍼센트로 변경해줍니다.

(※ 가로값을 100%로 주었기때문에 height 값도 어느정도 늘려줘야 비율이 맞습니다. )

아래는 소스 변경 후에 PC화면에서 유투브 화면 크기입니다.

아래 사진가지고는 구분이 잘 안되지만 가로값을 100%로 주었기 때문에

포스팅 가로 페이지에 유투브 동영상이 꽉차게 삽입됩니다.

이제 문제의 모바일화면을 보겠습니다.

가로값을 100%로 변경하니 모바일에서 재생시에도

화면비율이 맞게 나옵니다.

결론: 티스토리, 네이버 블로그 등 포스팅 내에 유투브 동영상을 삽입할 때는

모바일 유입자를 고려하여 가로값(width)을 100%로 준다.

실제 동영상을 삽입하여 차이점을 보여드리겠습니다.

모바일로 직접 확인해보시면 어떤 차이가 있는지 명확히 알 수 있습니다.

Verse1. width="723" height="400"

Verse2. width="100%" height="400"

PC화면에서는 동일한 크기입니다.

하지만 모바일에서는 어떨까요?

모바일로 직접 확인해보시기 바랍니다.^^

매의눈이었습니다.