질문/공유질답게시판

자바스크립트 질문좀 드립니다 (oembed 관련)

기븐

oembed로 유튜브를 보면 가로 크기가 컨텐츠영역에 꽉 차게 (길게 늘여져서) 보이는 문제점이 있는데,

 

쭉 찾아보다 보니 oembed.js 파일에 해당 부분이 있는 거 같더군요.

 

일단 유튜브 oembed 걸린 걸 보면

 

스크린샷(78).png

 

 

 

이런 식으로 되어 있는데, 저기 보면 iframe 태그 첫부분에 width="425" height="349" 라는 부분이 있는데, 밑에 보면 style="width=920px; max-width=920px" 라는 부분이 생성되어 있습니다.

 

처음 425 349 부분은 찾아보니까 jquery.oembed.js 파일에 있는 기본값인데, 뒤에 달린 스타일 태그 부분은 oembed.js 파일에 max-width 부분인거 같더군요.

 

oembed.js 파일에 해당 부분을 보면

 

스크린샷(79).png

 

 

이렇게 되어 있는데, 확인해 보면 저희 사이트 컨텐츠영역 본문 넓이가 920px이더군요.

 

즉 이 부분 때문에 뒷부분 style= 이하 부분이 생성돼서, 앞부분의 넓이/높이 정의부분을 무시하게 되어서 동영상이 가로로 길게 나타나는 문제가 생기는거 같은데

 

이걸 없애주려면 어떻게 해야 하나요?

 

자바스크립트는 하나도 몰라서 잘 모르겠네요 (저 구문이 정확하게 무슨 말인지도 모르겠고...)

 

조언좀 부탁드립니다.

위로 아래로
댓글 21
  • profile

    가장 좋은 방법은 제가 만든 멀티미디어 컨텐츠에 내장된 iframe.js를 사용하는 것 입니다.

  • profile

    소스입니다. 

     

    게시물에 있는 iframe 크기를 현재 content 크기 보다 커지지 않게 자동 리사이즈 처리 해주며,

     

    반응형에도 능동적으로 작동합니다. 또한 처음 출력시 크기를 기억하기 때문에, 설정된 크기 이상으로 커지진 않습니다.

     

    (function($) {
var res;

$(document).ready(function()
{
resizeTarget();
});

$(window).resize(function()
{
if(res) clearTimeout(res);
res = setTimeout(function(){resizeTarget()},300);
});

function resizeTarget()
{
IframeResize('iframe:visible');
}

function IframeResize(target)
{
var xe_content = $('.xe_content');

xe_content.each(function()
{
var $iframe = $(this).find(target);

if($iframe.length < 1) return;

$iframe.each(function()
{

//var component = $(this).attr('data-component');
//if(component != 'multimeidea_contents') return;

var bwidth,
bheight,
_w,
_h,
framesize,
per;

_w = $(this).width();
_h = $(this).height();

bwidth = $(this).attr('data-width');
bheight = $(this).attr('data-height');

framesize = $(this).closest('.xe_content').width();
per = framesize / bwidth;

if(framesize < _w)
{
$(this).animate({width:framesize,height:bheight*per},{duration:400,queue:false});
}
else if(framesize < bwidth)
{
$(this).animate({width:framesize,height:bheight*per},{duration:400,queue:false});
}
else if(framesize > bwidth)
{
$(this).animate({width:bwidth,height:bheight},{duration:400,queue:false});
}
});
});
}
}) (jQuery);

     

     

    위의 파일을 iframe.js(예)로 저장한 후 사용에 필요하신 부분에 불러오도록 하시면 됩니다.

  • profile ?
    일단 적용은 했는데요, 창을 줄여보니까 동영상 크기도 같이 줄어드는 건 잘 되는데(창을 늘였을때 다시 늘어나지는 않네요)

    사실 지금 문제가 그게 아니라... 처음 페이지를 로딩했을 때 동영상의 넓이가 컨텐츠영역 넓이(여기서는 920px)로 출력되는 부분입니다. 위에 보시면 style="width=920px" 라는게 나타나는데...

    앞부분엔 width="425" 라고 되어 있는데, 저 뒤에 저 부분이 달리는 바람에 동영상이 가로로 길게 늘어나 버립니다.

    이걸 없애고 싶은데... 어떻게 해야 할지 모르겠네요.

    (가만 찾아보니, oembed.js 파일에 있는 구문은 max-width 관련된거 같네요. 그냥 width는 저거랑은 상관없는거 같은데...)
  • ? profile
    jquery.oembed.js 파일보면

    약 234번째 줄에

    attr('width', width)
    attr('height', height)


    이게 있는데 이걸

    css('width', width)
    css('height', height)

    이렇게 바꾸거나

    그냥

    추가해주세요

    그리고 min.js 파일이 있으면 min.js로 실행되니까 삭제해버리세욧... (아니면 min.js 파일에서 찾아서 똑같이 수정해주세요)
  • profile ?
    css로 바꿔봤는데 안되네요...
  • profile ?

    혹시 이거랑은 관련 없나요?

     

    /* Make videos semi-responsive
 * If parent div width less than embeded iframe video then iframe gets shrunk to fit smaller width
 * If parent div width greater thans embed iframe use the max widht
 * - works on youtubes and vimeo
 */
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);
}
}
}

     

  • ?
    하.. 가만보니까 넓이 뿐만이 아니라 댓글에 쓸 때는 길이도 지나치게 길게 출력되는 문제가 있네요. ㅠㅠ
  • ? profile
    $('iframe', oembedContainer).width(iframe_width_orig / ratio);
    $('iframe', oembedContainer).height(iframe_height_orig / ratio);


    이 부분을 지우면 될 것 같기도..

    width랑 height() 이게 style 태그의 width와 height을 추가하는 듯하네요
  • profile ?
    저 부분들을 아예 통째로 지워줬더니 드디어 길이/넓이가 정상적으로 나오네요. 혹시 문제는 없겠죠?
  • ? profile
    다른 크기 관련 이슈 말고는.. 문제는 없을 듯 합니다.

    근데 만약 width height 값이 없을 때 문제가 될지도..?
  • profile ?

    아래로 내리다 보면

     

    /* Native & common providers */
$.fn.oembed.providers = [
//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를 설정해 주니까 그대로 출력되는거 같네요. 위에서 알려주신 iframe.js도 같이 적용해서 그런지 모바일에서 보니까 넓이가 알아서 줄어들어 있네요.

     

    감사합니다

  • ? profile
    넵 제 소스는 반응형으로 동작합니다..ㅋㅋ 창크기가 줄어들면 알아서 비율대로 줄어드는 게 핵심이고,

    반대로 키우면 비율대로 커지는데, 처음 크기 이상으로는 커지지 않는 게 장점이죠..!
  • profile ?
    근데 줄어드는건 잘 줄어드는데 그 상태에서 다시 키우는건 안 되는거 같네요... 줄어들은 그 상태 그대로입니다
  • ? profile

    엇 그럴리가 없을텐데욥..?! 잉???

     

    https://xetown.com/index.php?mid=square&category=4300&document_srl=72830

     

    이거 줄여보시면 아시겠지만 다시 커지는뎅....! 물론 처음 크기 이상으로 커지진 않구요

  • profile ?

    스크린샷(85).png

     

    스크린샷(86).png

     

    스크린샷(87).png

     

     

     

     

     

     

     

    각각 처음 올렸을때, 창 크기를 줄였을때, 창크기를 다시 늘렸을때 모습입니다. 창을 줄일 때는 가로폭에 맞게 줄어드는데 비율대로 줄어드는 게 아니라 가로 크기만 줄어들고, 다시 창을 늘이면 저렇게 줄어들은 모습 그대로네요.

     

    잘못 적용한 걸까요? 저기 위에 올려주신 그대로 iframe.js로 저장하고 스케치북 게시판 js 폴더에 넣은 다음 list.html 파일 최상단에 <load target="js/iframe.js" type="body" /> 라고 추가해줬는데...

  • ?
    아 글고보니까 oembed는 oembed 자체적인 크기설정이 있어서 그런거 같기도 하고...
  • ? profile
    뭔가 스크립트 에러가 있을 듯 한데... 크기를 못구해오나??
  • ? profile

    아 그럴 수도 있겠네요.. ㅇㅅㅇ;;;;

     

    제건 iframe 기준으로 줄이니까... 그렇다면 안쓰시는 게 좋을 것 같음;;ㅇ;;;

     

  • profile ?
    뭔가 이상하네요. oembed 말고 직접 소스코드 입력해서 iframe 태그로 동영상을 삽입해도 제대로 동작하지 않습니다. 여전히 가로크기만 줄어들고 세로는 그대로이고 다시 크기를 늘여도 돌아오지 않고...

    스케치북 게시판 때문인가 했는데, 여기 게시판도 스케치북이라서 좀 이상하네요.
  • ?
    여러모로 살펴봤는데, 아무래도 멀티미디어 삽입 컴포넌트를 이용하여 동영상 첨부시에만 해당 스크립트가 제대로 작동하는 듯 합니다 ㅠㅠ
  • ?
    전 그냥 640*360 짜리 이미지를 div 안에 두고 100% 처리한 다음
    그 위에 동영상을 높이 100% 넓이 100% 처리합니다.
    어차피 이미지가 가변에 맞게 사이즈 잡아 두니까 그걸 기준으로 넓이 처리하면 별 문제 없더군요.