타운광장토픽게시판

미디어 임베드 애드온을 배포했습니다.

https://xetown.com/point_contents/1564278

 

정식으로 한다고는 했는데, 아무래도 혼자는 역부족이어서 버그가 적지 않을 것으로 예상됩니다.

보통은 포인트 컨텐츠 자료실에서 소통을 해도 되는데,

자료실 댓글 커맨드가 아무래도 기능이 미흡해서 (별점 외에는 텍스트만 사용가능하고 보기도 불편하죠ㅜ)

이 게시물을 스레드 삼아 당분간 여기서 소통을 하고자 합니다.

 

테스트를 한다고는 했는데,

아마 관리자 외의 경우 보안 때문에 코드가 날아가는 경우가 있어서 그 부분이 좀 걱정이 되긴 합니다.

많은 의견 부탁드립니다~

글쓴이 윤삼

profile
많이 아는 건 없고 조금 알아서 무서운 선무당입니다. 그래서 특기는 이따금 나오는 비의도적 헛다리 짚기ㅜ 페인팅은 결코 아닙니다.
  • profile

    <p>링크</p>
    가 제거 되면서 약간 애로점이 생기네요.
    동영상섬네일 애드온(유료)에 의존하려면 위 링크가 제거가 되면 안되는 상황인데요.

    애매한 지점입니다.(네이버,카카오 의 경우 동영상섬네일 애드온에서 섬네일을 지원하고 있어서...)

    네이버는 p태그가 없는데도 섬네일용 파일이 첨부가 되긴 하네요.

  • profile profile
    링크 텍스트를 남길 필요가 있다는 말씀이시죠?
    그 생각을 놓치고 있었네요.
    중요체크!
  • profile profile
    네. 제거가 되는게 오히려 문제가 되는 경우가 더 많을 것 같습니다.
    링크가 있어야 하는 상황이 있을 것 같습니다. embed에서 공유기능을 찾을수도 있겠지만... 접근성을 고려한다면...
  • profile profile
    반응 속도를 높이기 위해 꼼수를 썼었는데 썸네일 가져오는 것도 고민을 좀 해봐야겠습니다.
  • profile profile
    섬네일만 해결된다면 링크가 없어져도 아주 큰문제는 아닐 수 있겠네요.
  • profile
    감사합니다.
    잠깐 밖에 나왔는데 빨리 들어가서 설치하겠습니다.
    미디어 임베드 끝판왕
  • profile profile
    해보셨습니까? 분명 문제가 있을 텐데 주말이어서 그런지 다들 뜸하시네요.
  • profile profile
    라이믹스 2.0.10에서 특별한 문제점을 발견하지 못했습니다.
    라이믹스 2.0.11로 업데이트 후에도 사용상의 문제점은 없는 것 같습니다.
    감사합니다.
  • profile
    *버그제보 요청사항 아님*

    본문의 섬네일 이미지는 display:none 으로 하는게 더 좋은 운영자도 있을 수 있겠네요. 이건 취향문제 일수도 있지만 유튜브 작은이미지가 PC 큰화면 100%로 채워져서 잠시 보였다가 선명한 영상의 섬네일로 바뀌는게 이전에 봤던 이미지가 차이가 조금 느껴지는..

    이건 자료에서 수정이 필요 사항이 아닌 자료를 사용하는 운영자 마다 선택을 할 수 있는 부분이라 살짝 언급해 봤습니다. 뒤쪽에 이미지 안보이게는 각자 css에서 display:none; 만 추가해 주면 되는 문제니까요.
  • profile profile
    네, 그거는 none으로 처리하셔도 되구요.
    css 파일을 보면 img에 filter로 blur가 들어가 있을 텐데 해당 filter를 삭제하면 썸네일 원본 이미지를 제대로 볼 수도 있을 거예요.
  • profile profile

    블러 제거해도 이미지가 너무 작아서 PC 큰화면에서는 화면에 맞추면 화질이 낮아서 없는게 낫겠더라구요.

  • profile profile
    큰 화면 생각하면 none 이 나을 수 있겠네요 :)
  • profile

    url 주소를 없애는것이 옳은 것인가? 에 관해 잠시 고민을 해봤습니다.
    호불호 취향문제로 볼수도 있지만 꼭 해당 url을 적는 것이 목적인 이용자에게는 의도한 것을 하지 못하게 하는 것의 결과로 바뀌는 건데요..

    확실한 판단은 서지 않고 있습니다.

    트위터 게시글을 공유해보니 이점은 굉장히 안좋아 보이네요. 쉽게 퍼나르기 어려워 보여요. 인스타그램 또는 미디어에 따라 공유 자체를 찾지 못하는 경우도 많아 보입니다.

  • profile profile
    붙여넣기했을 때 이용자가 직접 선택하는 것도 방법일 텐데 그건 생각만해도 왠지 복잡해서ㅋㅋ
    링크 파싱 애드온 때처럼 애드온 옵션을 둬서 url 병기를 하든 임베딩만 하든 하게 해주면 될 것 같아요.
  • profile profile
    네. 옵션으로 해서 붙여넣기 한 url이 남도록 할 필요가 있다고 생각이 기울고 있습니다.
    사용자에 따라 그게 없었으면 한다면 스스로 지우면 그만일 것이란 생각도 들구요. 개인적으로는 url 정보가 중요정보라 있는게 더 좋다라고 보여지네요.
  • profile
    몇가지 테스트 해본 게시판 입니다.
    https://rxtip.kr/temp
  • profile
    버그는 아니지만,,
    한 게시물에 여러개의 유튜브 영상을 업로드 할 시
    스크롤바를 줄이기 위해 가장 첫번째 URL만 자동 변환하고
    나머지 링크들은 링크 클릭 시 변환되게 하는것도 좋을 거 같다는 생각이 듭니다!
  • profile profile

    과거의 oembed 애드온이나 링크파싱 애드온, 파서링크 모듈 등에서는 그렇게 구현해볼 수 있을 것 같은데요.
    현재 미디어 임베드 애드온은 에디터에 iframe 태그를 바로 입력하는 성격의 애드온이서 그렇게 하는 건 불가능할 것 같습니다.

    몇몇 서비스의 경우에는 lazy loading(스크롤 위치에 따라 순차적으로 로딩)을 지원하기도 하는데요.
    유튜브에서 그런 걸 하려면 api 키를 발급받아 서비스를 이용하면 가능하긴 합니다.
    그치만 아무래도 범용 애드온으로 만든 것이다보니 이용자들에게 api키 발급과 입력 등의 수고까지 끼치게 하기가 힘든 측면이 좀 있네요ㅜ

  • profile profile

    안되는 이유를 자세히 설명 해주셔서 감사합니다!
    애드온 설치하여 테스트중인데 속도도 빠르고 위에 웹지기님 의견처럼
    URL 출력 안되는 부분 외에는 매우 만족스럽네요.

    계속 사용해보고 버그 발생 시 피드백 드리겠습니다!

  • profile profile
    네, 부탁드리겠습니다~~
  • profile

    프로알라 에디터 사용자분들 중에서는 인스타그램 게시글이 절반만 불러와지는 현상이 있었습니다.
    이 경우 js 폴더의 _froala에서 instagram의 span에 있는 fr-video만 삭제해주니 정상적으로 작동되는것 같습니다!
    해결 방법 알려주신 윤삼님 감사합니다!😀😀

  • profile profile

    프로알라 에디터 사용시 모바일에서 나타나는 현상인데요.
    정확하게는 미디어 쿼리에 의해 device 넓이가 줄어들었을 때 fr-video 요소의 가로 세로 비율이 16:9 사이즈로 잘리게 됩니다.
    일단 언뜻 보기에는 fr-video를 삭제하면 해당 요소의 일종의 위젯 기능(전체 삭제 기능을 비롯해 드래그 앤 드랍 같은 기능들)이 무효화되는 것 같으니, 이 부분을 감안하시고 해당 클래스명을 삭제하시면 되겠습니다.

    차후 버전에서는 이 문제에 대응할 수 있는 방편도 연구해보도록 하겠습니다.

  • profile profile
    fr-video보다 이 방법이 더 나아 보입니다~
    https://xetown.com/topics/1564294#comment_1565199
  • profile

    @벨로위키

    애드온 관련 소통은 여기서 하도록 할게요 :)

     

    1. 트위터 입력 화면에서 잘 보이는 것 같습니다. 혹시 모르니 브라우저의 쿠키, 인터넷 사용기록, 캐시 등등을 삭제해보시겠어요?

    1.png

     

    2. 아프리카 티비도 브라우저 호환성 문제인 것 같은데요. 윈도우+크롬에서는 잘 나옵니다. 이 부분은 아프리카 쪽의 문제라고 봐야 할 것 같아요. api와 액세스 토큰 취득 등 복잡한 절차를 따르지 않고 영상을 따오는 것이라 브라우저 호환성에 문제가 있을 수도 있겠습니다.

    0.png

  • profile profile

    알려주신 방법으로 하니 컨트롤러가 생겼습니다. 추가로 콘솔 에러가 있어서 제보해 드립니다. 

    nrecognized feature: 'web-share'.
    index.html:7 The key "target-densitydpi" is not supported.
    DevTools failed to load SourceMap: Could not load content for https://res.afreecatv.com/css/global/mobile/mobile_embed_player.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
    rhymix.min.js?20210501000457:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    rhymix.min.js?20210501000457:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    rhymix.min.js?20210501000457:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    rhymix.min.js?20210501000457:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    DevTools failed to load SourceMap: Could not load content for https://static.m.afreecatv.com/lib/hls/hls.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
    www.instagram.com/:1 Uncaught (in promise) undefined
    load (async)
    (anonymous) @ b638c28265e0.js:52
    t @ b638c28265e0.js:52
    m.exports @ b638c28265e0.js:52
    (anonymous) @ b638c28265e0.js:2
    requestIdleCallback (async)
    (anonymous) @ b638c28265e0.js:2
    c @ (index):22
    i @ (index):22
    r @ (index):22
    (anonymous) @ b638c28265e0.js:1
    c @ (index):22
    i @ (index):22
    r @ (index):22
    (anonymous) @ b638c28265e0.js:190

  • profile profile
    노란색 경고는 무시하셔도 되고, 빨간 색이 뜨더라도 콘텐츠 삽입이 잘 되고 컨트롤이 잘 된다면 상관 없을 겁니다. 그쪽 사이트의 문제 같더라구요 :)
  • profile profile
    😍 감사 합니다. 정말 대단한 애드온인 것 같습니다.
  • profile profile
    단순히 영상들만 임베드 되는 줄 알았는데 트위터나 페이스북 게시글도 임베드 되는걸 보고 깜짝 놀랐는데요 혹시 이런식이라면 네이버카페나 당근 마켓 번개장터 이런 곳도 임베드가 가능한 것인가요?
  • profile profile
    일단 해당 사이트에서 정보를 제공해줘야 하구요.
    오픈 그래프(og)를 준수하는 사이트라면 기본 정보 정도는 파싱해서 가져올 수 있죠.
    파서링크 모듈이 있기는 한데, 미디어 임베드 애드온의 궁극적 목표는 붙여넣기를 했을 때 링크 프리뷰 카드를 입력해주는 거랍니다~
  • profile

    아직 다양한 동영상을 이용하지 않아 모르겠습니다만,

    유투브 동영상 이용 시입니다.

     

    작업을 마치고 리스트(목록, 특히 갤러리나 그리드 형태)에서 보면 섬네일이 

    실제 이미지 파일을 첨부한 글과는 다르게 나타나는 것 같습니다.

    (레이아웃이나 스킨 영향 때문인 것 같습니다만 원인을 모르겠네요. ㅠ.ㅜ)

     

    media-embed-1.jpg

     

    왼쪽은 이미지 파일이 첨부된 글이고 오른쪽은 media-embed 애드온으로 링크 포함된 글입니다.

    섬네일이 조금 다르게 나타나네요.

     

    이런 현상은 어떻게 조정해야 할지 몰라서요..

     

    혹시 원인 등을 알 수 있을지요.

    감사합니다.

     

    ps. 

    추가로 확인해 보니 내부 이미지 링크는 정상적으로 섬네일 보여주지만

    외부 링크는 오른쪽 항목처럼 이미지가 다 나오지는 않네요.

     

    애드온 영향은 아닌 것 같습니다. ^^;;

    그래도 너무 편하게 사용 가능한 애드온 만들어 주셔서 감사하게 사용하고 있습니다. ~

  • profile profile
    네, 왠지 그럴 것 같았습니다.
    썸네일 생성 함수에서 차이가 발생할 수도 있을 거고, 아니면 게시판에서 따로 다른 방법을 써서 그런 걸 수도 있을 것 같아요.
  • profile profile

    네 확인해 보니 스킨에서 섬네일 크롭을 width 360px 으로 하고 있네요.
    그러다 보니 원래 유투브 섬네일 320px 보다 크니 나머지를 흰 여백으로 크롭해 놓는 것 같습니다. ^^;;
    (그럼 크롭 이미지 사이즈를 줄여야 하나... 그럼 태블릿 등에서 섬네일이 너무 흐릿해서 ...)

    원인 알았으니 어떻게든 조정해서 타협해 봐야 겠습니다. (360 x 280 -> 320 x 180 이미지 크롭 사이즈 조정으로 해결? 타협?)
    감사합니다 ^^

  • profile profile
    요즘은 crop이나 ratio보다는 fill이 대세인 것 같던데요ㅎㅎ
    라이믹스도 이번 버전부터는 fill을 기본으로 한다고 합니다~
  • profile profile
    ㅋㅋ 전 그냥 소스에서 글자 몇 개 바꾸는 수준이라
    유료 스킨 사용 중인데 뜯어 고쳐야 하는 거라면 제 수준에선 불가항력적 영역입니당 ^^;;
  • profile profile
    ㅠㅠ 그럼 사이즈 조정을 하셔야겠네요.

    _ckeditor.js 파일 하단에 보면
    mqdefault.jpg 라는 글자가 있을 텐데요.
    이걸 hqdefault.jpg 로 바꿔보세요~
  • profile profile

    감사합니다.
    한번 try 해 보겠습니다 ^^;;

     

    앗,

    말씀 듣고 fill 해당하는 부분이 어딜까 살펴보다가

    getThumbnail() 함수에서 crop 부분이 있길래 이걸 fill 로 바꿨더니 가득 채워졌습니다. 야호 ~~~~

     

    여러모로 정말 많은 도움을 받고 있습니다.

    다시 한번 감사의 말씀을 ~

     

  • ?

    감사합니다. 테스트 해본 url 공유합니다.

    모두 공유 링크 를 사용하였습니다.

    실패
    레딧 - 로드 자체가 안됨

    성공
    사운드 클라우드 - 글쓰기시에는 정상이나 글 발행 이후 css 높이 디자인이 꺠집니다. height 100% 설정 때문인것 같은데

    왜 문제가 생기는지 잘모르겠네요. 


    슬라이드 세어
    비메오
    카카오tv
    네이버tv
    jsfiddle 
    codepen

    트위터 - 글쓰기시에 전체 내용이 표시 되지 않고 높이가 잘립니다. 그러나 글 등록후에는 정상적으로 로드 됩니다.

  • ? profile
    확인을 한다고 했는데ㅜ 레딧과 사운드 클라우드는 다시 제대로 확인을 해봐야겠습니다.

    트위터를 비롯해 인스타, 페북, 틱톡 등 가로 세로 비율이 정해져 있지 않은 콘텐츠들은 에디터 내에선 아이프레임의 사이즈를 조절하는 게 불가능합니다ㅠ
    외부 사이트에서 작동하는 아이프레임 콘텐츠의 높이를 측정해야 하는데,
    특히나 에디터 안에서는 콘텐츠 높이를 가늠하기조차 어렵거든요.
    CK에디터에서도 한참 해보다가 실패했고, 프로알라에서도 마찬가지구요 ㅡㅜ
    그래서 iframe을 가져오는 게 가능하다면(그마저도 트위터 타임라인은 iframe을 바로 가져올 수도 없어요ㅜ) 가급적 밉지 않은 선에서 잘라서만 보여주기로 했습니다.
    소셜 미디어 콘텐츠를 에디터에 앉힐 때 아예 미리보기를 포기하는 것도 방법일 것 같은데, 판단이 잘 안 서네요.
  • profile ?
    트위터를 비롯해 인스타, 페북, 틱톡 등 가로 세로 비율이 정해져 있지 않은 콘텐츠들은 에디터 내에선 아이프레임의 사이즈를 조절하는 게 불가능합니다ㅠ

    >> 하긴 그렇겠네요. 리포트 차원이었고, 크리티컬 하지 않습니다. 게다가 글쓰기시 미리보기 포기는 이 애드온의 의미를 크게 반감한다고 생각합니다.



    그리고...레딧 됩니다. ????

    사운드 클라우드 높이 문제만 좀 봐주시면 고맙겠습니다. 아무래도 프로알라에서만 생기는 문제 같습니다.
  • ? profile

    iframe 태그를 감싸는 span 태그가 있을 텐데요.
    거기 스타일에 padding-bottom: 0; 라 돼 있는 걸 padding: 0; 으로 바꿔보시겠어요?
    보통 동영상 반응형으로 만들 때 padding-bottom으로 맞추는데, 프로알라에서는 신기하게도 padding-top으로 맞춰져 있네요ㅜ

  • profile ?

    네. 소스보기를 눌러 padding:0으로 태그를 수정해봤는데 다른 변화가 없는듯 합니다.

  • profile ?

    스킨에 이런게 들어가 있어서 지워버렸더니 해결 되었습니다.
    .xe_content > p.vid {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden}
    .xe_content > p.vid iframe,.xe_content > p.vid embed,.xe_content > p.vid object,.xe_content > p.vid embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%}

     

    전부 제탓입니다.^^ 고맙습니다.

  • ? profile
    그거 지우면 다른 문서들이 영향을 받을 수도 있을 것 같은데..ㅜ
    암튼 신중하게 지우신 거겠죠.

    혹시 이후에 다른 콘텐츠 임베딩에서도 비슷한 문제가 생긴다면 비슷한 방식으로 접근하시고, 저도 참고할 수 있도록 알려주시면 좋겠습니다~
  • profile ?
    네. 그렇더라고요. T.T 그래도 위 내용이 문제이니...원인이라도 알아서 다행입니다.
  • ? profile
    아무래도 .xe_content > p.vid 삭제는 마음에 걸리네요ㅜ

    문제가 됐던 span 태그에
    padding: 0;
    padding-top: 0;
    padding-bottom: 0;
    등을 조합해서 적용해보시는 것이 어떨까 합니다.

    정 안되면
    padding: 0 !important 같은 것이라도요.
  • profile ?

    신경써주셔서 감사합니다.

    padding: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding: 0 !important ;

    .xe_content > p.vid {position: relative; padding-bottom: 56.25%; padding: 0; height: 0; overflow: hidden}
    요런식으로 전부 바꿔서 해봤는데....페이스북과 트위터 제외하고 다른 모든 임베디드된 내용들이 사라지네요...

    무엇때문인지..참...해서 위 내용 모두 삭제를 하면 전부 정상으로 돌아오나....모바일에서 애드온으로 삽입된 유튜브가 잘립니다

  • ? profile
    아 p.vid 쪽이 아니라요.
    제가 의견 제시하는 데 스킵이 컸네요ㅠ

    애드온의 프로알라.js 을 보면
    각 미디어별로 코드를 삽입해주는 소스가 있는데요.
    거기에 soundcloud 부분
    => iframe 태그를 감싸는 span 태그(fr-video가 있는 부분)
    => style 속성에 padding~~ 어쩌구저쩌구를 적용해보자는 의견이었어요.
  • profile ?
    $.getJSON('https://soundcloud.com/oembed', params, function(data) {
    matches = data.html.match(soundcloudRegExpIframe);
    if ( matches[2] === 'tracks' ) {
    style = 'height: '+ data.height +'px; padding: 0 !important ;';
    } else {
    style = 'height: 374px; padding: 0 !important ;';
    }

    아..일단 말씀하신게 요 부분이 맞다면.... 이렇게 작성하고, 사운드 클라우드 링크 붙여 보았으나 다른 변화는 없어 보입니다.
  • profile ?

    .xe_content > p.vid {position: relative; padding-bottom: 56.25%; padding: 0; height: 0; overflow: hidden}

    요건 기존 그대로 두고 테스트 했었습니다. 

  • ? profile
    .xe_content > p.vid 이게 span 태그를 한번 더 감싸고 있는 거군요!
    어느 자료에선가 분명 이유가 있어서 만들어진 wrapper 일 텐데, 얘를 회피할 방법을 잘 못찾겠습니다ㅠ

    처음에 하셨던 대로 p.vid의 스타일을 지우는 것 말고는 방법이 없겠네요.
    혼선을 드려서 죄송합니다ㅜㅜ
  • profile ?

    네. 저걸 지우면 삽입된 영상들이 반응형이 되질 않네요. pc 에서 삽입되 유튜브가 모바일에서 잘리니

    반응형을 강제 하기 위해 넣어둔듯 합니다. ^^ 괜찮습니다. 제가 좀 더 파보고 더 고민 해보겠습니다.

  • profile
    혹시 틱톡링크는 어떤 링크를 지원하시는지 여쭤봐도 될까요?! https://vt.tiktok.com/ZSJDPD466/ 요걸 지원 안하는거 같아서요!
  • profile profile
    사이트에서 제공하는 링크 복사 서비스 기준으로 정규식을 짜다보니 허점이 있을 겁니다.
    이렇게 알려주시면 완전 감사하죠~!
  • profile profile
    아, 해당 주소는 틱톡에서 일반적으로 지원해주는 임베드 가능한 주소가 아니네요.
    https://www.tiktok.com/oembed?url=https://vt.tiktok.com/ZSJDPD466

    이런 데서는 되는 걸로 보아
    https://iframely.com/embed/https%3A%2F%2Fvt.tiktok.com%2FZSJDPD466
    아마도 따로 api key 발급을 받든 좀 복잡한 절차가 필요한 것 같습니다.

    단순히 정규식으로 주소 따와서 될 일이 아니네요.
    연구 좀 해봐야겠습니다~
  • profile profile
    감사합니다!!
  • ?

    윤삼님 좋은 자료 감사드립니다.
    트위치, 유튜브, codepen, 카카오tv, 아프리카tv, vlive, 레딧, 트위터로 테스트를 해보았는데요.
    트위터는 글읽기 화면에 표시가 되지 않네요. 쓰기 화면에서도 공간만 생길뿐 내용이 보이지 않습니다.
    데모사이트에서 잘 되고 있는듯한데 뭐가 문제일까요..?

     

    데모에 올려진 mlb.com이나 당근마켓은 안되고 있는게 맞는건가요

  • ? profile

    1. 트위터는 브라우저 캐시, 쿠키 등등 삭제해보세요.

    2. 데모 사이트에서 에어비앤비, relive, mlb.com, streamable 등은 다음 버전에 포함될 예정입니다.

    3. 당근마켓은 시험삼아 해본 것이고, 해당 사이트에서 공개한 정보로 가져온 콘텐츠가 아니기 때문에 애드온에도 포함하지는 않을 생각이에요.

  • profile ?

    dd.png.jpg

    트위터 링크를 넣고 보여지는 화면입니다. 글자가 나오지 않네용..브라우저 쿠키,캐시 삭제하고 난 후의 화면입니다

    개발자 도구를 보니 트위터 링크가 있는데 화면에는 나타나지 않네요.

  • ? profile
    (보안 관련된 기록은 제외하고) 인터넷 사용기록 포함해서 다 지워보셨나요?

    개발자도구에서 봤을 때 트위터 로딩하는 js는 잘 불러와지나요?

    사용하시는 라이믹스 버전, 웹브라우저는 어떻게 되시나요?

    트위터 링크를 붙여넣기 했을 때 로그인 정보가 관리자인가요, 일반회원인가요, 비회원인가요?

    문제가 되는 페이지의 url은 어떻게 되나요?
  • profile ?

    인터넷 사용기록 포함해서 전부 지우기 했고
    구글 개발자 도구로 봤을때 아래와 같은 오류가 뜨네요!
    라이믹스 버전 2.0.11 브라우저 구글, 사파리, 파이어폭스에서 확인했고
    관리자로 로그인하고 테스트 해봤습니다.
    테스트 중인 페이지는 아래 주소입니다!
    (해결되어 주소는 삭제했습니다.)

    embed.Tweet.a19bd2e49b47d0822e92.js:1 Uncaught Error: id is a required parameter
    at embed.Tweet.a19bd2e49b47d0822e92.js:1
    at Array.reduce (<anonymous>)
    at p (embed.Tweet.a19bd2e49b47d0822e92.js:1)
    at Module.373 (embed.Tweet.a19bd2e49b47d0822e92.js:1)
    at b (embed.runtime.d6e002d47a332101d70a.js:1)
    at d (embed.runtime.d6e002d47a332101d70a.js:1)
    at Array.n [as push] (embed.runtime.d6e002d47a332101d70a.js:1)
    at embed.Tweet.a19bd2e49b47d0822e92.js:1

  • ? profile
    붙여넣기한 트위터 url 주소는 어떻게 되나요?
    정규식에 문제가 있었던 듯 싶습니다.
  • profile ?
    https://twitter.com/kma_skylove/status/1390933834602926090?s=20

    트위터 주소입니다
  • ? profile

    아, 생각해보니 다음 버전을 위해 이미 수정을 해놨었네요.
    (트위터 말고도 작업량이 많다보니 헷갈립니다ㅜ)

    ckeditor 쓰시는 거죠?
    _ckeditor.js 트위터 정규식을 아래와 같이 바꿔보세요.

    var twitterRegExp = /^https?:\/\/(?:www\.)?twitter\.com\/(?!explore|login|settings|tos|privacy|search|i\/flow|i\/events|i\/moments)(\w+){1,15}(?:\/(?:(status|lists))?)?(?:\/([0-9a-zA-Z-_]+)(?:\?.+)?)?$/;

  • profile ?

    _ckeditor.js 수정하고 해보니 아까처럼 안보이는 것이 아니라 주소가 그대로 뜹니다.

    에디터에서 붙여넣기시에도 가져오는 느낌없이 주소가 바로 뜨네용

  • ? profile

    혹시 브라우저 캐시 등등도 해보셨나요? 알려주신 url로 들어가보니 잘 뜨는 것 같은데요..

    0.png

  • profile ?

    확인 감사합니다!!!! _ckeditor.js 처음에 주소가 그대로 떠서 코드를 다시 복붙했더니 구글과 사파리에서는 나옵니다. 저의 복붙실수였던것 같습니다. ;_; 구글과 사파리에서 뜰때 한참 걸리는데 제 사이트가 속도가 많이 느린걸까요..
    그리고 파이어폭스에서만 아까와 마찬가지로 빈 공간이 나오고 있네요! 브라우저마다 다를 수 있는 건가요? 딱히 전 파이어폭스를 자주 사용하진 않지만 궁금합니다!

     

    +) 사운드클라우드는 비교적 빠른거 보니까 트위터 자체가 느린가보네용..

  • ? profile
    그럴 가능성이 아예 없진 않을 것 같습니다.
    브라우저별로 지원되는 메소드들이 다른 경우도 있고,
    js 실행할 때 커맨드에 미세한 차이도 있고 그렇더라구요.
    파폭은 저도 안 써서 잘 모르는데, 누군가 기여를 해주시면 좋겠네요ㅜ
  • profile ?

    그런다면 정말 좋겠네요! 전 지금도 충분히 만족하지만요 :-) 저도 파이어폭스는 테스트용으로만 쓰고있어서 잘 보지 않기도 하구요
    항상 좋은 자료를 제작해주시고 공유해 주셔서 너무 감사할따름입니다!

  • ? profile

    에어비앤비, 인스타, 페북, 틱톡, 트위터 같은 소셜 미디어 콘텐츠들은 각 사이트에서 제공하는 js로 콘텐츠 로딩을 한번 더 해야 하더라구요.

    (그나마 인스타는 빠릿빠릿한 것 같더군요. 틱톡은 그나마도 말을 잘 안 듣는 것 같구요)
    가급적 외부 js에 의존을 안 하고 싶은데, 콘텐츠들의 세로 사이즈가 유동적이라는 게 걸림돌이 됩니다.
    iframe의 세로 사이즈를 맞춰주려면 그쪽에서 제공하는 콘텐츠를 가져와서 그 높이에 맞춰 디스플레이를 해줘야 하거든요ㅜ
    일반적인 동영상 같은 경우는 보통 16:9 같은 식으로 정해져 있으니까 세로 높이를 우리쪽에서 그냥 미리 정해버리면 그만이지만요.

  • profile ?

    그렇군요.. sns를 안해서 유일하게 트위터만 확인할 수 있었는데 인스타는 좀 빠른가보네요!
    속도에 집착하는 편이라 제 사이트 자체에 문제가 있나 싶어서 걱정을 했었네요 :-)

    문제 해결해 주셔서 다시 한번 감사드립니다!

  • profile profile
    오 relive 성공 하셨군요. 기대가 됩니다 +_+. 이정도 애드온이면 버그픽스 하셔서 유료 서드파티로 배포 하셔야 아닌가 하는 생각이 듭니다.
  • profile profile
    그냥 아마추어 취미로 하는 거여서요ㅎㅎ
    판매하면 그만큼 책임도 져야 하는데 저는 그 정도는 감당 못해요ㅜ
  • profile

    다운받아 적용 해봤습니다. 우선 감사합니다.
    유듀브같은 것은 썸네일이 만들어지는데 인스타그램은 썸네일이 안만들어지는것 같네요. 버그는 아니고 처음부터 그렇게 만들어진거겠죠?

    글쓴 이유는 핸드폰에서 볼때 인스타그램을 넣었을때 본문 화면을 벗어나는게 인스타그램의 최소폭이 커서 그런가요?

    Screenshot_2021-05-08-23-38-13.png.jpg

  • profile profile

    네 인스타그램에서 썸네일을 제공하지 않아서요.

    썸네일 가져오는 게 아예 불가능하지만은 않지만 그렇게 하면 반응 속도가 꽤 느려질 겁니다.

     

    모바일 가로폭 문제는 작업노트를 따로 열어봐야 알 것 같긴 한데요.(기억이 섞여 있어서ㅜ)

    관련 url을 남겨주셔야 상황 파악이 좀 더 용이할 텐데요.

     

    이쪽 링크에 가면 모바일에서도 잘 보이시나요?

    https://dev.aporia.blog/board_fKje44/34277

    제가 그 사이에 관련된 문제를 발견하고 이미 수정을 한 것일 수도 있는데요.

    암튼 else님 스샷이 나오는 url을 알려주셔야 비교가 가능할 것 같습니다.

     

    아 그리고 만약에 데모페이지에서도 모바일 가로가 넘쳐보인다면, 인스타에서 제공하는 최소 가로폭보다 else님 사용하시는 디바이스의 가로폭이 좁아서 그런 걸겁니다ㅜ

  • profile profile
    아.. 죄송합니다. 제가 스샷만 넣고 주소를 안넣었네요.
    http://afbase.com/ac4_fboard/828662
    테스트 아이디 패스워드는 test, 0000 입니다.
    제 핸드폰은 LG G5 골동품입니다.
    그리고 윤삼님 글에있는 주소를 봤는데 그 주소의 인스타 그램은 딱 가운데에 있네요. 제껀 오른쪽으로 치우쳤는데.. 이게 제 레이아웃 문제일까요? 유튜브랑은 문제없이 가운데에 있는데요.
  • profile profile

    가로 375px짜리 디바이스로 봤을 때 아티클 부분 가로폭이 309px 정도로 보이는데요.
    이게 아마 레이아웃 등의 영향으로 인스타 임베딩 콘텐츠의 최소 넓이보다 작아져서 그런 것 같습니다.

    else님 기기로 데모 페이지의 인스타 콘텐츠가 제대로 보였을 수는 있겠는데요.
    제 경우에도 기기가 320px짜리면 인스타 콘텐츠 영역이 밖으로 튀어나갑니다.

    인스타 콘텐츠의 최소 넓이를 우리쪽에서 수동으로 조정하기는 무리가 있어보이구요.
    그 대신 콘텐츠를 감싸는 영역에 overflow-x: auto를 줘서 콘텐츠가 영역 밖으로 나가면 좌우 스와이핑해서 볼 수 있는 방법으로 처리를 하면 좋을 것 같습니다.

  • profile profile
    답변 감사합니다. 크게 문제 될것 같진 않은데 한번 알려주신대로 수정 해보겠습니다.
  • profile
    윤삼님 핀터레스트는 외부 임베드가 어려운 환경인가요? 가능하다면 추가 되었으면 좋겠습니다.
  • profile profile
    살펴봤는데 까다로운 작업이긴 합니다. 지금도 트위터, 페북, 인스타, 틱톡 등 때문에 작업량이 많은 편인데 핀터레스트도 딱 그런 방식이거든요.
    가급적이면 에디터상에서 미리보기를 제공하고 싶은데 세로 사이즈가 정해져 있지 않은 소셜 미디어 임베딩은 그게 참 어려워요ㅜ
    그래도 일단 도전은 해보겠습니다.
  • profile profile
    고생이 많으십니다. 지금도 차고 넘치니 베스트셀러 서드파티가 될 겁니다. 항상 감사 드립니다.