https://xetown.com/lakepark/72529

 

이 질문글에서의 내용을 정리하여 올립니다.

 

 

 

1. 동영상 가로/세로크기가 지나치게 넓게 나오는 문제 해결법

 

기본적으로 컨텐츠영역이 동영상보다 클 경우 꽉 차게 나오도록 되어 있더군요. 해당 부분을 제거해야 합니다.

 

jquery.oembed.js 파일을 열고

 

if(settings.maxWidth) {
var post_width = oembedContainer.parent().width();
if(post_width < settings.maxWidth) {
var iframe_width_orig = $('iframe', oembedContainer).width();
var iframe_height_orig = $('iframe', oembedContainer).height();
var ratio = iframe_width_orig / post_width;
$('iframe', oembedContainer).width(iframe_width_orig / ratio);
$('iframe', oembedContainer).height(iframe_height_orig / ratio);
} else {
if(settings.maxWidth) {
$('iframe', oembedContainer).width(settings.maxWidth);
}
if(settings.maxHeight) {
$('iframe', oembedContainer).height(settings.maxHeight);
}
}
}

 

이 부분을 찾아서 삭제한 다음, (수정: 다시 해보니까 저 부분 삭제 안해도 되네요) 하단에 내리다 보면 기본 가로세로 크기를 지정해놓은 부분이 있습니다.

 

예:
 

//Video
new $.fn.oembed.OEmbedProvider("youtube", "video", ["youtube\\.com/watch.+v=[\\w-]+&?", "youtu\\.be/[\\w-]+", "youtube.com/embed"], 'http://www.youtube.com/embed/$1?wmode=transparent', {
templateRegex: /.*(?:v\=|be\/|embed\/)([\w\-]+)&?.*/,
embedtag: {
tag: 'iframe',
width: '560',
height: '315'
}
}),

 

여기에서 width와 height를 사이트에 맞게 수정합니다.

 

 

 

2. max-width 문제 해결

 

스케치북 게시판 등의 반응형 게시판 사용시에, max-width 값 때문에 동영상 크기가 창 크기에 맞게 제대로 줄어들지 않는 현상이 있습니다. 스케치북 게시판의 경우 이를 제거하면 창의 가로폭이 줄어들을 경우 창 크기에 맞게 동영상의 가로크기가 알아서 조절됩니다.

 

oembed.js 파일을 열고

 

if(!this.embedSetting.maxWidth)
{
this.embedSetting.maxWidth = $('.xe_content').width();
}

 

이 부분을 제거하면 게시판의 media 구문이 제대로 동작합니다.

 

 

 

(참고1. min.js 해결법

 

그냥 js파일만 수정하면, min.js파일을 먼저 불러오기 때문에 적용이 안됩니다.

 

따라서 원래 있던 min.js 파일들은 확장자 뒤에 .bak 등을 붙여서 변경하거나 삭제하고,

 

수정한 js 파일을 갖고 http://jscompress.com/ 같은 min.js 변환 사이트를 이용하여 min.js 파일을 새로 생성하여 업로드하면 됩니다.

 

 

 

참고2. 모바일에서 동영상이 가로로 빠져나오는 문제 해결

 

스케치북 게시판과 같은 반응형 게시판을 모바일용으로 사용하거나, 또는 사용중인 모바일용 게시판스킨의 css파일을 수정하여 iframe 태그의 max-width 값을 100%로 수정하면 됩니다.

 

.bd iframe,.bd video{max-width:100%} 이런 식으로 추가해주면 됩니다.)