의뢰/마켓서드파티 소식

미디어 임베드 애드온 0.5.0

윤삼
조회 수 24634 추천 수 8 댓글 90
크게 작게 댓글로 가기
크게 작게 위로 아래로 댓글로 가기

오랜만에 인사 올립니다.

연휴 안에 작업을 끝내고자 했는데 연휴 다음날까지 하게 되는군요.

https://xetown.com/point_contents/1564278

 

자세한 업데이트 내용은 다음과 같습니다.

 

+ 업데이트 내용

 

 

  1. 설정
    - 링크 텍스트 옵션 지원 : 애드온 설정에 따라 콘텐츠 임베딩을 할 때 링크 텍스트를 삽입할 수 있습니다.
     
  2. 전체적 개선

    - '생략 메시지' 삭제 (SEO 등에 부정적 영향 때문) @웹지기
        ... 페이스북, IMGUR, 인스타, 핀터레스트, 텀블러, 트위터 등에 해당
        => CK에디터 notification 플러그인 활용 (플러그인이 없으신 분은 아래와 같이 해주세요)

    1. https://ckeditor.com/cke4/addon/notification 에서 플러그인 다운로드

    2. 압축 해제 후, 루트/common/js/plugins/ckeditor/ckeditor/plugins/notification 으로 업로드

    3. '관리자 페이지 > 콘텐츠 > 에디터 > 공통 설정 > 추가 플러그인 로드'에 'notification'을 추가

    - 짧은 주소의 리디렉션 url 추적 방식을 수정
    - 모바일에서 클립보드 히스토리로부터의 붙여넣기 동작 추가 (input 이벤트로 캐치) @메로낭
    - 링크 텍스트 남기기 (애드온 설정 작동) @웹지기 @눈팅용
    - 몇몇 임베딩의 이중동작을 통합 (iframe삽입 후 썸네일 삽입으로 Undo를 두 번 해야 하는 문제 있었음)
     

  3. 주요 서비스별 개선

    - 아프리카TV : vod의 재생 시작 시간 반영

    - 에어비앤비(AIRBNB) : 파라미터 없을 때도 콘텐츠 임베드

    - 인스타그램(INSTAGRAM) : 릴스 형식 추가 @토딩

    - 짤봇(JJALBOT) : 썸네일 추출 방식 수정

    - 핀터레스트(PINTEREST) : 새로 발견된 주소 체계에 대응

    - 스포티파이(SPOTIFY) : 썸네일 추가 및 출력 디자인 변경 ... oEmbed Endpoint 활용

    - 테너(TENOR) : 썸네일 미제공으로 인해 원본 이미지 추출

    - 틱톡(TIKTOK) : 짧은 주소 해제 방식 수정 @아라후

    - 틱톡(TIKTOK) : 모바일 재생 문제 @아라후 ... 서버쪽에서 복구된 것으로 보임

    - 트위터(TWITTER) : 트윗을 임베드할 때 언어 형식을 한국어로 수정
    - 유튜브(YOUTUBE) : 썸네일을 최대 사이즈로 변경
     
  4. 서비스 추가
    - 없음
     
  5. 추가해야 할 보안 설정
    - 없음

     

 

위의 업데이트 내용을 꼭 확인해주세요!

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
위로 아래로
댓글 90
  • profile
    감사합니다 윤삼님
    CK에디터 notification 플러그인은, 현재 에디터를 도구상자 간단모드를 사용하더라도 정상적으로 사용 가능할까요?!
  • profile profile
    네, 메시지 출력만 해주고 도구상자에 들어가는 플러그인은 아니어서 괜찮을 겁니다.
  • profile profile
    너무너무 감사합니다 :)
  • profile

    와우~~ 정말 감사합니다. 잘쓰겠습니다.

    그런데, 링크텍스트의 경우 왼쪽에 잡히고 임베드는 중앙에 위치하는데
    링크텍스트도 동일하게 중앙에 위치하려면 어느파일을 손봐야할까요

    css파일에는 바뀐부분이 없는듯해서 실례를 무릎쓰고 여쭈어보아요

  • profile profile

    addons/media_embed/js/_ckeditor.js 109행을 바꿔주시면 됩니다.

     

    html = embed_leave_link ? '<p>'+ paste +'</p>' : '';

     

    위와 같이 되어 있을 텐데요. 아래와 같이 바꾸시면 될 거예요.

     

    html = embed_leave_link ? '<p style="text-align: center;">'+ paste +'</p>' : '';
  • profile profile
    정말 감사합니다 윤삼님
    복 드리고 갈께요
  • ?

    역시나 이번에도 잘쓰겠습니다!!. 이제는 프로알라에서 어떤 기능이 안되었는지는 기억도 안납니다. 

    그만큼 좋습니다~

  • ? profile
    에디터 바꾸셨던 겁니까?
    어려운 결정이셨을 텐데 대단하십니다ㄷㄷㄷ
    잘 되신다니 다행입니다 😌
  • profile ?
    아..아니요. 에디터는 그대로 쓰는데 미디어 임베디드 사용시 다른 불편함을 모르겠습니다^^
  • profile
    와... 오랜만입니다 윤삼님 ㅎㅎ 항상 좋은정보감사드립니다.
    새해 복 많이받으세요~
  • profile profile
    오랜만입니다~
    새해 복 많이 받으세요~!
  • profile profile
    흡.. 0.3버전을 사용하다가 이번에 0.5 버전으로 디렉터리 맞교체를했는데 에디터가 불러와지지않네요..ㅠㅠ
    혹시 어떤부분을 확인해봐야할까요??
  • profile profile
    브라우저 캐시도 비워보시고 캐시파일 재생성도 해보셨나요?
    0.3이면 삭제하고 새로 0.5를 설치해보시고, 캐시파일 재생성과 브라우저 캐시 삭제도 해보세요.
  • profile profile
    캐시파일은 재생성했는데 브라우저 캐시를 고려안했네요! 다시해보겠습니다
  • profile profile
    ㅠㅠ 둘다했는데 적용이 안되는군요.. 여전히 빈 에디터로 보여집니다..
  • profile profile
    다른 자료와 충돌이 있을 수도 있고 어떤 이유인지는 모르겠지만 급하시면 롤백을 하시는 게 좋겠네요ㅜ
  • profile profile

    디렉토리 교체가 어떤의미 일지 궁금하네요

    그리고 문제가 있을 당시 개발자도구 콘솔에 에러를 보시면 스크립트 에러가 발생하는지 확인할 수 있습니다.

     

    1. https://ckeditor.com/cke4/addon/notification 에서 플러그인 다운로드

    2. 압축 해제 후, 루트/common/js/plugins/ckeditor/ckeditor/plugins/notification 으로 업로드

    3. '관리자 페이지 > 콘텐츠 > 에디터 > 공통 설정 > 추가 플러그인 로드'에 'notification'을 추가

     

    1,2,3 작업은 하셨나요?

  • profile profile
    네 1,2,3 작업은 완료했습니다.

    기존 0.3 버전의 media_embed 를 media_embed.bak으로 변경하고 신규 0.5 버전을 그대로 옮겼습니다
    스크립트에러쪽은 한번더 확인해봐야겠네요.
    조언감사합니다!
  • profile
    좋은 자료 감사합니다.
    연휴라는 달콤한 시간을 다 쓰신 것 같아 너무 감사하고 죄송하네요.
  • profile profile
    코딩은 즐거운 일 아니겠습니까ㅋㅋㅋㅋ
  • profile
    알림 떠서 왔습니다. 업데이트 감사 드리고 새해 복 많이 받으세요.
  • profile profile
    네, 오랜만에 인사드려요. 새해 복 많이 받으세요~!
  • ?
    언제나 유용한 자료 감사히 잘 사용하겠습니다. 새해 복 많이 받으세요~
  • ? profile
    이번 판올림으로 거의? 완전히? 안정화됐다고 보셔도 될 것 같아요.
    새해 복 많이 받으세요~!
  • profile
    새해 복 많이 받으세요! 윤삼님!
  • profile profile
    늦었지만 새해 복 많이 받으세요~~
  • profile
    윤삼님 너무 감사하게 잘 사용하고있습니다
    다만, 혹시 이번 업데이트 이후에 유뷰브 섬네일이 https://i.ytimg.com/vi/6pxI2X2E4xA/maxresdefault.jpg 와 같은 빈 섬네일로 표시되는 경우가 굉장히 많아졌는데요,
    제 예상으로는 고해상도 섬네일을 지원하지 않을 경우 유튜브에서 위 기본 이미지를 출력하는것 같습니다.
    혹시 확인 부탁드려도 될까요?
  • profile profile

    js에서 어떻게 처리하는지 모르겠지만 댓글의 url을
    https://i.ytimg.com/vi/6pxI2X2E4xA/hqdefault.jpg

    이렇게 고쳐서 보면 이미지가 있는거 보니 이미지가 있는데 못보여 주는건지 일단 이미지는 있네요.

     

     

    그리고 

     

    https://i.ytimg.com/vi/6pxI2X2E4xA/default.jpg

    위와 같은 아주 작은 이미지도 있는데요.

     

    지금 알려주신  url은 뭘까요???

    thumb = data.thumbnail_url.replace('hqdefault', 'maxresdefault');

    js 에 위와 같은 부분이 있는데 여기와 관련이 있을지도...

     

    검색을 좀 해보니까

    maxresdefault.jpg 가 1280 * 780 최대 해상도 섬네일 이미지네요.

    이렇게 큰 섬네일을 가지지 않는 영상은 오래된 영상이나 영상 해상도에 따라 많이 나올 것 같습니다.

     

    특별한 규칙없이 무조건 maxresdefault.jpg 로 섬네일을 가져오게 하는건 섬네일을 가지지 못하는 영상이 많아질 우려가 있는 부분이네요.

     

    라이믹스 최신버전에서 작은 이미지도 이제 섬네일 생성에 문제가 없도록 고쳐졌기에 1가지로 정해야 한다면 굳이 가장 큰 이미지가 아닌 작은 사이즈로 정하는게 좋을 수도 있어 보입니다.

  • profile profile
    모든 유튜브에서 해당 오류가 발생하는것이 아니라, 일부 동영상(10~20%)에서만 발생하는것으로 봐서는
    아마 고해상도 이미지 관련해서 문제가 조금 있는것으로 보이긴 합니다 ㅠㅠ
  • profile profile

    오류는 아니고 최대사이즈 해상도 섬네일을 가지지 못하는 영상이 일정 비율 존재하기 때문으로 보입니다.
    다른 복잡한 확인 과정을 거치는 것을 하지 않고 단순한 해법은(굳이 최대사이즈 섬네일 유무를 확인하는 과정을 거치는 건 성능만 떨어뜨릴 뿐 ...)

    .replace('hqdefault', 'maxresdefault') 이부분을 제거하면 될 것 같다는 판단입니다.

     

    지금 예시로 주신 영상의 경우도 hqdefault 보다 더 큰 최대 해상도 섬네일 이미지는 없는 영상입니다.

    (원본 영상 사이즈 작거나 오래된 영상의 경우 가장큰 해상도의 섬네일이 없는 경우가 많을 겁니다.)

  • profile profile
    그런 문제가 있을 수 있군요.
    @웹지기님 말씀처럼 _ckeditor.js 파일의 유튜브 부분에서
    thumb = data.thumbnail_url.replace('hqdefault', 'maxresdefault'); 이것을
    thumb = data.thumbnail_url; 으로 바꿔야겠습니다.
  • profile profile
    전 이미 ㅋㅋ 섬네일에 너무 욕심 안부려도 충분히 좋아요 ㅎㅎㅎ
  • profile profile

    다 있는 줄 알았죠 뭐ㅎㅎㅎ

     

    고대구로병원

    이렇게 붙여넣었을 때 바로 앞에 ㄱㄱㅁ이라는 글자가 있다면, 즉 붙여넣기로 인해

    ㄱㄱㅁ고대구로병원

    이라는 글자가 완성됐을 때, 구글맵을 삽입해주는 건 좀 번거롭겠죠?

    욕심은 끝이 없습니다ㅋㅋ

     

  • profile profile

    노력에 비해 쓰임새가....

    혹시 뭔가 하고 싶으시다면...
    이미지클립보드 이미지 붙여넣기 하면 업로드......
    이건 일이 큰거인지 잘몰라서 ㅋㅋ

  • profile profile
    오… 완전 대박입니다
    모바일에서는 이미지 붙여넣기시 바로 업로드 기능 구현이 참 어렵더라구요 ㅠㅠ
  • profile profile
    크흑 생각만 해도 어렵네요ㅜ
  • ?
    아....요즘....유튜브 쇼츠가 유행인데

    쇼츠 url은 대응이 안되는 것 같습니다. 이 부분 참고 하시고 고려 해주시면 고맙겠습니다
  • ? profile

    이미 대응은 하고 있는데 프로알라라면 반영이 안 되어 있을 거예요ㅜ
    https://dev.aporia.blog/board_fKje44/33750#comment_36648

     

    덧. 이게 짧은 주소로 넘어온 경우에는 세로 사이즈를 못잡기는 하네요;;

  • profile ?

    아~ 그렇군요. 확인 감사합니다. 혹시 제가 메뉴얼 수정 할수 있게 참고 할만한 코드가 있을까요?

  • ? profile

    프로알라에디터를 들여다본지 한참이나 돼서 이렇게 해서 될지 모르겠습니다.

    백업 잘 해놓으시구요;;;

     

     

    1. 일단 유튜브 정규식을 바꾸셔야 합니다. _ckeditor.js에서는 shorts 식별을 위해 이렇게 하고 있습니다.

    var youtubeRegExp = /^https?:\/\/(?:www\.|m\.)?(?:youtube\.com|youtu.be)\/(?:[\w\-]+\?)?(?:(?:(v|list|embed|v|shorts))(?:=|\/))?([\w\-]{11})(\S+)?$/;

     

    2. 그리고 618행쯤 되려나요.
    start = queries.t ? '?start=' + queries.t : ''; 의 바로 아래에

              if ( matches[1] === 'shorts' ) {
                style = ' style="max-width: 320px; height: 570px; top: 50%; left: 50%; transform: translate(-50%, -50%);"';
            } else {
                style = '';
            }

    를 넣어줍니다. 형식이 쇼츠일 때 대응하는 스타일이에요.

     

    3. 그리고 iframe 태그가 있는 줄을 다음과 같이 바꿔줘봅니다. 기존 코드에서 style 부분만 첨가해봤어요.

    '<iframe width="640" height="360" src="https://www.youtube.com/embed/'+ id + list + start +'" frameborder="0" allowfullscreen="" class="fr-draggable"'+ style +'></iframe>' +

     

    이 마지막 3번이 제대로 될지 모르겠어요.

    _ckeditor에서는 iframe 바깥에 div를 감싸서 그 안에 썸네일도 넣고 스타일이 서로 어울리게끔 했는데,

    프로알라는 유튜브를 임베드하는 기존 코드가 있어서 어떤 식의 스타일 적용이 좋을지 잘 모르겠습니다.

    iframe 바깥의 span 태그에 어떤 스타일이 지정되어 있었는지 가물가물하네요;;

     

    테스트 페이지에 해보시고 말씀 나눠주셔도 좋을 것 같습니다.

  • profile ?
    너무 고맙습니다. 1번 적용후 쇼츠 인식했고, 2번 3번 적용후 쇼츠 스타일(테두리 없고 긴 영상, 링크 주신 것 처럼 )이 먹혀 들어갔습니다

    다만 transform: translate(-50%, -50%) 제거 하니 위치까지 본문 안으로 제대로 잡혔습니다.
  • ? profile
    네, 생각해보니 그 코드는 position 값이 있는 걸 전제로 했던 것 같아요.
    잘 된다니 다행입니다~
  • ? profile
    아참, 근데 쇼츠 영상이라도 짧은 주소를 통해서 붙여넣기가 되면 일반 영상으로 인식이 돼서 가로사이즈로 임베딩이 될 겁니다. 현재 제공되는 api로는 짧은 주소를 읽어들였을 때 쇼츠를 판별할 거리가 없더라구요.
  • profile ?
    네.^^ 정보 감사합니다.
  • ?
    안녕하세요.
    처음 사용해보고 있습니다. 좋네요. 감사합니다.

    필요한 몇 가지는 잘 되는데, IMDb 영상의 경우 무한로딩됩니다.
    데모로 올려주신 영상도 안되는 것으로 봐서 제 설정에 문제가 있는지 검색을 하고 있습니다.

    어떤 걸 점검해봐야 할까요.

    cafe24 웹호스팅 / Rhymix 2.0.18 / 미디어 임베드 애드온 0.5.1
    브라우져는 전부 동일증상
  • ? profile

    제가 아는 주소 형식으로는 잘 되고 있는데요.

    시도하시려던 주소를 알려주시겠어요?

    에러메시지 확인도 가능하다면 부탁드립니다~

  • ?
    아 네...
    샘플로 올라가 있는 주소입니다.
    https://www.imdb.com/video/vi729202201?ref_=vp_rv_2


    레이어로 뜨는 메시지입니다.
    무한로딩

    콘텐츠를 로딩 중입니다.
    잠시만 기다려주세요.
  • ? profile
    개발자 도구를 통해 확인되는 에러메시지도 공유해주세요~
  • profile ?

    _ckeditor.js?20220211061836:719 Uncaught TypeError: Cannot read properties of null (reading '1')
    at Object.<anonymous> (_ckeditor.js:719:99)
    at i (jquery-2.2.4.min.js:2:27151)
    at Object.fireWith [as resolveWith] (jquery-2.2.4.min.js:2:27914)
    at z (jquery-2.2.4.min.js:4:12059)
    at XMLHttpRequest.<anonymous> (jquery-2.2.4.min.js:4:15619)

  • profile ?
    핀터레스트 링크(짧은주소)도 이런 메시지가 떠서
    긴 주소로 바꿔보니 되더라구요
  • ? profile
    cors 우회가 되지 않는 것 같습니다.
    파싱에 실패할 경우에 대비해서 무한로딩을 중지시켜야겠네요.
    확인 감사합니다.
  • ? profile

    js > _ckeditor.js를 보면 // IMDB로 시작하는 부분이 있는데요. 그 부분을 아래와 같이 바꾸고 테스트해보실 수 있을까요?

    // IMDB
matches = paste.match(imdbRegExp);
if ( matches && matches[1] && matches[2] === 'vi' && $.isNumeric(matches[3]) ) {
    setPastedContent(e, paste);
    waitMediaEmbed();

    id = matches[1];
    url = 'https://www.imdb.com/video/imdb/'+ id +'/imdb/embed?&format=1080p&width=&isResponsive=true';

    $.get(cors + url).done(function(data) {
        if ( data ) {
            matches = data.match(/"videoPlayerObject"[^{]+{"video"[^{]+(\{.+"width":[\d]+\})\}/);
            if ( matches ) {
                params = JSON.parse(matches[1]);
                thumb = params.slate ? '<img src="'+ params.slate +'" style="display: none;" />': '';
                html +=
                    '<div class="'+ iframe_wrapper +'" contenteditable="false">' +
                        thumb +
                        '<iframe src="'+ url +'" allowfullscreen="true" frameborder="no" scrolling="no"></iframe>' +
                    '</div>' +
                    '<p>&nbsp;</p>';
                e.editor.insertHtml(html);
                completeMediaEmbed();
            } else {
                e.editor.insertHtml(paste);
                completeMediaEmbed();
            }
        } else {
            e.editor.insertHtml(paste);
            completeMediaEmbed();
        }
    }).fail(function() {
        e.editor.insertHtml(paste);
        completeMediaEmbed();
    });
}

     

  • profile ?
    빠르게 깜빡이긴 하나 텍스트가 그대로 붙여넣기 됩니다.

    에러메시지도 없습니다.
  • ? profile
    네, 확인 감사합니다.
    잘은 모르지만 사용하시는 서버가 cors를 우회하기 위한 애드온의 설정과 상성이 안 맞는 듯해요.
    IMDb를 비롯해 몇몇 서비스는 실행이 안된다고 보셔야 할 것 같습니다.
    이런 경우에 나타나는 무한로딩을 중지시킬 수 있도록 버그 수정을 하겠습니다.
  • profile

    트위터임베드 밑에 텍스트글 또는 이미지같은걸 삽입하면 임베드 하단 하단이 잘리는 증상이 있는데 저만 그런가요?

  • profile profile
    본문/댓글 읽기 모드에서 그런가요? 아니면 쓰기 모드에서 그런가요?
    트위터 등 리치 텍스트가 제공되는 콘텐츠들은 에디터 안에서는 세로 사이즈가 고정되게 돼 있습니다.
    트위터에서 제공하는 js를 에디터 내에서 실행시킬 수 없기 때문입니다.
  • profile profile

    읽기모드에서 그래요.
    트위터임베드 밑에 텍스트글 또는 이미지같은걸 넣으면 그런것 같기도 하고..
    이게 나올때가 있고 안나올때가 있고 그렇네요. (읽기에서)

     

    --------

    댓글남기자마자 댓 남겨주신거 보고 깜짝놀랐네요...

  • profile profile
    네트워크 사정에 따라 js 실행 시점이 엇갈리거나 다른 자료와 충돌이 있는 건 아닐까요...
    에러 메시지 확인 가능하시면 공유해주실 수 있을까요? 아니면 테스트 url도 좋구요.
  • profile profile
    네 테스트URL 쪽지로 보내드렸어요~
  • profile profile
    윤삼님 말씀처럼 네트워크 사정에 따라 js 실행 시점이 엇갈리나봅니다.
    나올떄도 있고 안나올때도 있고 그렇습니다
    해외서버라서 그런가봐요. 국내 서버로 돌리는건 또 잘 됩니다.
  • profile profile
    네 그럴 수도 있겠네요.
    오후 늦게나 저녁 때쯤 살펴보겠습니다~
  • profile profile
    좋은자료 배포해주셔서 정말 감사할 따름입니다. 복 받으세요 윤삼님
  • profile profile

    항상 그런 현상이 아니라는 점이 약간 다른 부분일 수도 있겠는데
    저의 경우 트위터 하단이 잘리는 문제는 게시판 스킨의 css에서 멀티미디어 부분 처리하는 부분이 영향을 주어서 말씀 하신 증상이 나타나서 게시판 스킨의 css 부분을 사용하지 않는 것으로 해결한 것이 있습니다.

    - 해당 css에 .app-article__video-container 라는 트위터의 class가 있는데 트위터 출력을 컨트롤 하려고 한 의도로 보입니다.

    혹시 몰라 비슷한 사례로 댓글 남김니다.
    게시판 스킨은 어떤 것을 사용중 이신가요?

    https://xetown.com/topics/1564294#comment_1625084

  • profile profile
    스케치북 게시판을 사용하고 있어요.
    한번 저도 시도해봐야겠습니다.
    정보 감사합니다!
  • profile profile

    스케치북 게시판이라면 저런 css는 없을 겁니다.
    혹시 레이아웃에서 관여하지는 않겠죠......

     

    저런 간섭하는 css가 없다면 시도하실 부분은 없는 것 같네요.

  • profile profile

    default.js 파일의 37행부터 트위터 부분이 나오는데요.

    이걸 다음과 같이 바꾸고 다시 한번 실행해봐주시겠어요?

     

    var $twitter = $('.twitter-status, .twitter-timeline, .twitter-moment');
if ( $twitter.length > 0 ) {
    var id;
    $twitter.each(function(i) {
        if ( $(this).hasClass('twitter-status') && !$(this).find('iframe').attr('data-tweet-id') ) {
            $(this).find('iframe').attr('data-tweet-id', $(this).attr('id').replace(/[^0-9]+/g, ''));
        } else if ( $(this).hasClass('twitter-timeline') && (!$(this).attr('data-width') || !$(this).attr('data-tweet-limit')) ) {
            $(this).attr('data-width', 550).attr('data-tweet-limit', 3);
        }
        if ( i + 1 === $twitter.length ) {
            $.getScript('https://platform.twitter.com/widgets.js');
        }
    });
}

     

  • profile profile

    윤삼님 원인을 찾은것 같습니다...ㅜㅜ

    전혀 예상하지 못한곳에서 발생한것 같습니다. 브라우저 개발자코드 보다가 로켓로더라는 영문이 보이길래 이게뭔가싶어 클플에 들어가 꺼보니 잘됩니다. 예전에 켜둔 클라우드플레어의 로켓 로러 기능때문일줄은 꿈에도몰랐네요

     

    바꿔주신 코드도 적용하니 잘 되구요.

    안바꿔도 짤리는 증상없이 잘 됩니다.

     

    결론: 클플의 로켓로더가 말썽이였습니다

  • profile profile
    원인을 찾으셨다니 다행입니다.
    그래도 말 나온 김에 코드도 좀 더 만져보고 겸사겸사 잘 된 것 같아요 :)
  • profile profile
    윤삼님은 긍정적인분이시군요. 흐믓
  • profile
    삼님~ 아프리카 영상은 임베디드 안되는게 맞나요?
    라이브 채널 들어가서 주소창에 있는 주소 복사 붙혀넣기 해도 변환을 하지 않네요.
    좋은 자료 올려주셔서 항상 감사합니다~
  • profile profile
    일단 저는 잘 되는데요. https://play.afreecatv.com/beijing05/238844355
    안 되는 주소가 어떤 건가요?
    자세한 내용 알려주시면 좋을 것 같아요.
  • profile profile
    댓글로 적어주신 링크도 변환이 안되네요.
    f12 콘솔에 에러 코드도 없고,, 그냥 링크만 나와요.
    설정이 빠진건지 -0-
  • profile profile
    아! a 태그가 포함 되어 있으면 변환이 안되는 거 였네요.
  • profile profile
    보안 설정 등에서 누락하신 게 있을 수도 있구요.
    아니면 서버의 설정과도 관계가 있을 것도 같습니다.
    (근데 저는 서버쪽은 전혀 모르는 영역이어서...)
  • profile profile
    네, a링크는 의도된 붙여넣기 동작이라 보고 텍스트만 인식하는 것으로 처리했거든요.
  • profile profile
    흐흐 주말에 감사합니다~
    왜 안되지 싶었네요 ㅋㅋ
  • profile
    임베드를 게시글에 넣으면 위치가 자동으로 센터에 맞춰지던데
    left, right, center 값을 애드온 내에서 조절할수 있었으면 진짜진짜 좋을것 같아요
  • profile profile
    애드온 설정에 style 태그를 넣는 부분이 있는데 혹시 시도해보셨을까요?
    (사실 저는 되겠거니 하고 실제로는 안 해봤어요ㅜ)
  • profile
    2. 사용자 설정 (사용자 CSS 설정)

    float: left;

    이렇게 넣어봤는데 적용이 안되더라구요
  • profile profile
    요소 지정은 안 하신 거예요?
    <style>과 </style> 사이에 들어갈 내용을 넣어보세요
  • profile profile
    .media_embed.twitter-status .twitter-tweet {
    float: left;
    }

    이렇게 해봤는데 안되는것 같아요. 제가 혹시 잘못한 부분이 있을까요
  • profile profile
    트위터라면
    .media_embed.twitter-status, .media_embed.twitter-list, .media_embed.twitter-profile {
    margin-left: 0;
    }
    이걸로 해보세요~
  • profile profile

    알려주신걸로 해보니 트위터 잘되네요 ㅎㅎ그런데 css에 있는 요소를 애드온에 그대로 붙여넣으면 적용이 안되나봐요.

    .media_embed .instagram-embed .media_embed .instagram-embed .instagram-media .instagram-media
    {
    margin-left: 0;
    }

    인스타그램도 관련된거 다 집어 넣고 margin-left: 0; 를 했는데 안되네요..흠..
    그냥 포기하고 센터로 전부 써야겠습니다 ㅜㅜ 일일이 하나하나 다 바꿀 생각하니 이걸 언제다하지? 하는 생각과 동시에 슬픔이 찾아오네요 ㅎㅎ

  • profile profile
    슬퍼하시면 안 돼요.
    하나하나 만든 사람도 있는데요 ㅋㅋㅋㅋ큐ㅠㅠㅠㅠ
    하나하나 만들다보니 스타일 커스터마이징에 신경을 많이 못 써서 그래요ㅜㅜ
    이 부분도 종합적으로다가 다시 살펴보겠습니다.
    (덕분에 애드온이 점점 완벽해지고 있어요!)
  • profile profile

    하나하나씩 코드 살펴보고 있는데

    윤삼님은 대단하신것같습니다....

    파일 열어서 볼때마다
    이거 만드시는데 얼마나 많은 노력이 들어갔을지 느껴져요

  • profile profile

    이게 사실은 혼자 할 작업이 아닌 것 같아요. iframely나 embedly처럼 기업 또는 팀 단위로 움직여야...

     

    css 파일을 아래 첨부파일로 바꾸시구요.

    아까 입력란에는 그냥 깔끔하게

    .media_embed {margin-left: 0 !important; text-align: left !important;}

    이라고 해보세요.

    그러면 가로 사이즈가 100%가 아닌 임베디드 콘텐츠들은 모두 왼쪽 정렬 될 겁니다.

    Atachment
    첨부
  • profile profile
    아참, 그리고 '링크 텍스트 꾸밈' 설정은 눈팅용님 사이트 갔다가 힌트를 얻은 것이에요 호호호호
  • profile profile
    아이디어에 도움이 되어 드렸다니 기쁘네요 ㅎ
  • profile profile
    네~ 아주잘됩니다. 링크주소도 왼쪽으로 바꿨더니 한결 좋네요

    임베드랑 텍스트,사진등 다양하게 게시물 내에 여러가지가 들어가게되면
    어떤건 중앙, 어떤건 왼쪽으로 붙어서 내용을 읽어나가기가 힘들었거든요 ㅎㅎ
  • profile profile
    그렇겠네요. 텍스트는 기본이 왼쪽이니ㅎ
    아예 다음 버전에서는 임베디드 요소를 왼쪽으로 기본 정렬하고, 중앙 정렬이나 우측 정렬은 커스텀하게 가는 것도 방법이겠어요.