유튜브 영상 모바일에서 최적화 하기

  모바일

개인이의 경우 유튜브를 활용한 포스팅을 한번씩 하게 되는데, PC버전에서 영상을 볼 때와 모바일에서 영상을 볼 때의 불편함이 있었습니다. PC버전에서는 깔끔하게 잘 나오던 영상이 모바일에서 시청을 하게 되면 화면 크기가 맞지 않아 짤리는 경우가 생겼습니다.

 

아래 이미지는 모바일에서 확인한 유튜브 영상인데, 보시는 바와 같이 화면이 짤린 현상을 볼 수 있습니다. 개인이의 경우 주로 음악을 듣는 위주로 사용을 하다보니 화면은 크게 중요하지는 않았지만, 어디까지나 개인적인 생각이고, 모바일 유입자를 배려한다면 이 부분을 수정할 필요가 있다라고 생각했습니다.

 

 


 

티스토리 모바일에서 보여지는 유튜브 영상을 최적화 하기 위해서는 약간의 소스 수정이 필요합니다. 약간이라고 했지만 정말 간단한 방법이라서 딱히 포스팅 할 내용은 없네요.

 

먼저 수정하고자 하는 포스팅에서 해당되는 유튜브 영상 소스를 찾습니다. 개인이의 경우 아래 부분이 유튜브 소스인데, 보통 width 값이 px로 설정되어 있습니다.

 

560으로 나와 있는데, 이 수치가 PC에서는 문제가 되지 않지만 모바일에서 볼 때는 앞서 본 것과 같이 영상이 짤리는 현상이 생기게 됩니다. 그렇기에 이 수치를 수정할 필요가 있습니다.

 

 


 

앞서 width 값이 px로 되어 있는 부분을 %로 변경합니다. 원본 크기와 상관없이 width 값을 100%로 수정해 주시면 끝입니다.

 

 


 

width 값을 100%로 수정한 후 PC버전에서 보여지는 영상입니다.

 

 


 

width 값을 100%으로 수정한 후 모바일에서 보여지는 영상 화면인데, 스마트폰 화면에 맞게 영상이 출력되고 있는 것을 보실 수가 있습니다. 혹시나 가로 버전으로 볼 때는 어떻게 되는지 궁금해 하실 수도 있는데, 가로 화면 비율에 맞게 출력이 됩니다.

 

 


 

유튜브 영상과 같은 포스팅을 주로 하신다면 모바일 유입자를 배려한 소스 수정 한번 해보시기를 바랍니다. 종종 다른 블로그의 글을 볼 때에 영상의 크기가 화면 밖으로 나가 버린 경우를 자주 보는데, 유튜브 활용이 많다면 도움이 되리라 봅니다.

이 글이 도움이 되셨다면 아래 공감 버튼을 눌러주세요. ^^ 

감사합니다.

 

Designed by CMSFactory.NET