Youtube, Vimeo, Naver TVCast 동영상 관련 사항입니다.

nQuark 티스토리 반응형 스킨은 이전부터 Youtube, Vimeo 동영상을 반응형으로 만들어주는 코드를 내장하고 있었습니다.

하지만 이게 제대로 동작하지 않는다는 문의가 많았는데, 그 이유는 동영상 코드를 <p></p> 태그로 감싸야만 반응형 코드가 제대로 동작했기 때문입니다.

이제는 그 작업이 jQuery 코드로 자동으로 이루어지므로, 그 작업을 일일히 할 필요가 없어졌습니다.

그래서 이제는 iframe 코드를 아무런 코드로 감싸지 않고 그냥 넣어도 반응형으로 동작합니다.

이 부분이 nQuark 2.1 -> 2.2 주요 업데이트 사항입니다.




이번 업데이트 사항의 특징 중 하나는, 유투브 동영상의 width/height 설정에 따라서 동영상 최대 크기가 정해진다는 것입니다.


아래 두 동영상은 모바일에서 확인했을 때에는 동영상 사이즈가 같지만, PC에서 확인했을 때에는 동영상 사이즈가 다르게 출력됩니다.


1. 풀사이즈로 확대되는 동영상 : http://blog.koyeseul.net/743


2. 최대 사이즈가 고정되는 동영상 : http://blog.koyeseul.net/371


이 두 동영상의 차이는 동영상의 내부 코드에 의한 것입니다.


이 두 동영상의 내부 코드는 다음과 같이 차이가 납니다.


1. <iframe src="https://www.youtube.com/embed/Iu-w6STAz64" frameborder="0" allowfullscreen=""></iframe>


2. <iframe width="560" height="315" src="//www.youtube.com/embed/J0tfYByemNc?list=PLMbmOPINC2jn1CnsfTKWfj5t-bbQckseu" frameborder="0" allowfullscreen=""></iframe>


두 코드의 차이는, 풀사이즈로 확대되는 동영상의 경우 width와 height를 따로 지정하지 않았다는 것이고, 최대 사이즈가 고정되는 동영상의 경우 width와 height를 동영상 코드 내부에서 지정했다는 것이 차이점입니다.


두 방식은 장단점이 있습니다. 풀사이즈로 보면 동영상을 더 크게크게 볼 수 있지만 그만큼 화질이 깨져 보일 수도 있기 때문입니다.


유투브에서 제공하는 기본값은 2번입니다. 그래서 이 부분에 별로 신경쓰지 않고 동영상을 삽입했다면 2번과 같이 적용될 가능성이 높습니다.




현재 이 동영상 반응형 코드는 기본으로 16:9 비율을 지원합니다.


만약 4:3 비율의 동영상을 지원하려면 동영상 iframe 코드 안에 p43 클래스를 추가해야 합니다.


http://blog.koyeseul.net/615


아래 삽입된 동영상은 4:3 비율입니다.


이 동영상의 소스코드는 다음과 같습니다.


<iframe width="420" height="315" src="https://www.youtube.com/embed/EBFYwX42QRQ" frameborder="0" allowfullscreen="" class="p43">


이 것은 현실적으로 16:9 비율의 동영상이 흔하고, 4:3 비율의 동영상이 드물기 때문에 한 조치입니다.




현재 티스토리 반응형 스킨 nQuark2.2는 유투브, 비메오, 네이버 TVCAST 동영상에 대한 반응형을 지원합니다. 네이버 TVCAST는 제가 연예인(SS501 허영생)을 좋아해서 덕질하기 위해 넣은 것이고, 연예 관련 동영상 포스팅을 자주 하지 않으시는 분은 어지간하면 그 부분이 필요 없을테니 빼 주시면 됩니다.


function resizeVideo(){

$("iframe[src*='youtube'], iframe[src*='vimeo'], iframe[src*='naver.com/flash']").each(function()


위 코드는 제 nQuark 스킨에 포함된 jQuery 코드로, iframe[src*='youtube'] 의 부분이 동영상 불러오는 부분에 youtube를 포함하는 동영상을 추출하는 부분입니다. 마찬가지로 iframe[src*='vimeo'] 가 비메오 동영상, iframe[src*='naver.com/flash'] 가 네이버 TVCAST 동영상의 공통주소가 포함된 부분입니다.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

티스토리 툴바