질문/공유공개자료실 "애드온"
애드온

미디어 임베드 애드온

윤삼
추천 수 5 댓글 95
Extra Form
자료 소개 CKEditor에 미디어 사이트의 링크를 '붙여넣기'하면 임베드 코드로 '바로 변환' 시켜주는 애드온
설치 경로 ./addons/media_embed
테스트 환경 Rhymix 2.0
라이선스 GPL v2
크게 작게 위로 아래로 댓글로 가기
이름 버전 날짜 다운수
media_embed.0.6.7.zip 0.6.7 2022-12-02 259
media_embed.0.6.6.zip 0.6.6 2022-11-01 123
media_embed.0.6.5.zip 0.6.5 2022-09-05 138
media_embed.0.6.4.zip 0.6.4 2022-08-25 112
media_embed.0.6.3.zip 0.6.3 2022-06-05 150
media_embed.0.6.2.zip 0.6.2 2022-04-03 143
media_embed.0.6.1.zip 0.6.1 2022-03-30 117
media_embed.0.6.0.zip 0.6.0 2022-02-17 152
media_embed.0.5.2.zip 0.5.2 2022-02-13 122
media_embed.0.5.1.zip 0.5.1 2022-02-10 119
media_embed.0.5.0.zip 0.5.0 2022-02-04 134
media_embed.0.4.0.zip 0.4.0 2021-06-26 204
media_embed.0.3.zip 0.3.0 2021-05-01 195

0.6.7 업데이트 (22-12-02)

 

1. 일반적인 개선

  • 미디어 임베드 애드온은 이번 0.6.7 버전을 끝으로 지원을 종료합니다.
  • 미디어 임베드 기능은 링크 프리뷰 모듈로 통합되었으므로 해당 자료를 이용해주시면 되겠습니다.
  • https://xetown.com/download/1724355

 

2. 개별 콘텐츠 개선

  • KAKAO TV: 재변경된 아이프레임 주소 대응(tv.kakao.com)

 

 

0.6.6 업데이트 (22-11-01)

 

1. 일반적인 개선

  • cors 적용시 메타태그를 통해 refresh 되는 대상 url을 추적함
  • 이번 버전이 본 애드온의 마지막 버전이 될 예정입니다. 이후에는 모듈화하여 (그리고 위키피디아 및 유튜브 뮤직 제거해서) 버그 수정 및 기능 개선을 제공할 계획입니다.

 

2. 개별 콘텐츠 개선

  • NAVER VIBE: 신규
  • NAVER VOD: 네이버 영화 트레일러 파라미터 오류 수정
  • NAVER VOD: 네이버 스포츠/게임 E-sports 영상 주소 변경 반영
  • NAVER VOD: 네이버 쇼핑라이브 추가 지원
  • DAUM NEWS: 주소 리다이렉트 변경 방식 반영
  • KAKAO TV: 숏폼(베타) 콘텐츠 대응
  • KAKAO TV: 변경된 아이프레임 주소 대응
  • APPLE MUSIC: sandbox 옵션 추가에 대응하여 재생 활성화
  • YOUTUBE MUSIC: 저작자 이름에서 '- TOPIC' 접미사를 제거
  • YOUTUBE MUSIC: 에디터의 iframe 태그에도 src 속성 부여

 

3. 이번 0.6.6에서 추가해야 할 보안 설정(기존 0.6.5 사용자 한정)

  • 설정 > 시스템 설정 > 보안 설정 > 외부 멀티미디어 허용 
    vibe.naver.com
view.shoppinglive.naver.com
play-tv.kakao.com

 

 

0.6.5 업데이트 (22-09-05)

 

1. 일반적인 개선

  • 문서 인쇄 화면, 미리보기 화면에서도 애드온 동작 적용

 

2. 개별 콘텐츠 개선

  • SOUNDCLOUD : 새로 추가된 짧은 주소 형식에 대응
  • TIKTOK: 프로필 페이지도 임베드 지원 포함

 

 

0.6.4 업데이트 (22-08-25)

 

1. 일반적인 개선

  • 붙여넣기 동작시에 클립보드 내용이 플레인 텍스트가 아닌 html 텍스트인 경우에도 임베딩을 시도함
    (특히 그동안 네이버 클립보드의 html 텍스트가 인식이 안 되는 경우가 있었음)

 

2. 개별 콘텐츠 개선

  • PINTEREST: oEmbed 지원에 따라 대응
  • WIKIPEDIA: 캡션 텍스트가 없어도 이미지를 가져올 수 있게 수정

 

 

0.6.3 업데이트 (22-06-05)

 

1. 개별 콘텐츠 개선

  • YOUTUBE MUSIC : 유튜브의 아이프레임 객체 지정 방식 변화에 대응
  • YOUTUBE MUSIC : 비디오ID가 없는 재생목록의 경우 저자 이름과 url을 제공자 정보로 대체

 

2. 신규 지원

  • WIKIPEDIA: 신규지원 | wikipedia-embed

 

3. 이번 0.6.3에서 추가해야 할 보안 설정(기존 0.6.2 사용자 한정)

  • 설정 > 시스템 설정 > 보안 설정 > HTML class 
    wikipedia-embed

 

 

소개 및 설치 방법

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

 

 

미리보기

https://dev.aporia.blog/board_fKje44/category/35668

 

 

버그 제보 및 건의

이곳 댓글은 소통이 제한적이어서 버그 제보 및 의견은 따로 듣고자 합니다.

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

이쪽에서 남겨주세요~

 

 

제작자 윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
위로 아래로
댓글 95
  • profile

    혹시

    ckeditor, froalaeditor 만 지원하는것 같은데
    https://xeplus.io/testboard_editor 이에디터에서도 추가적으로 사용할 수 있게 수정이 가능할까요?

  • profile profile
    해당 에디터의 붙여넣기 이벤트를 활용해서 클립보드 내용을 바꿔치기 한다고 생각하시면 될 거예요.
    물론 에디터에서 이벤트를 지원해줘야겠구요.
  • ?
    윤삼님 안녕하세요..! 트위터가 최근 X로 바뀌면서 링크가 적용이 안되는거 같은데 확인 부탁드려도 될까요?ㅠㅠ (아마 미디어 임베드 애드온이랑 비슷한 링크 프리뷰 모듈도 마찬가지일것같긴 합니다! 홈페이지에도 댓글 남겨두었습니다)
  • ? profile
    X의 주소 형식 좀 알려주시겠어요?
    제가 트위터 유저가 아니다보니...
    그나저나 바뀐 체계에서 자동 임베드가 가능할지는 해봐야 알 것 같아요.
    그리고 업데이트가 있더라도 미디어 임베드 애드온은 더 이상 어렵고 링크 프리뷰 모듈로 제공될 것 같습니다 :)
  • profile ?

    twitter.com이 기존이고
    x.com이 새로운 주소더라구요..
    근데 또 혼합해서 나오나봐요,,! (피씨 기준으로 봤을때 상단 링크는 트위터로 뜨고, 공유하기로 주소 복사시 X.com으로 뜨더군요 (밑에 말씀 확인했습니당!)

  • ? profile
    x.com을 아직 다 테스트한 것은 아니지만,
    링크 프리뷰 모듈 기준 tpl/js/_ckeditor.js 파일을 보면
    var twitterRegExp = ~~~~ 으로 시작하는 행이 있는데요.

    거기를
    var twitterRegExp = /^https?:\/\/(?:www\.)?(?:twitter|x)\.com\/(?!explore|login|settings|tos|privacy|search|i\/flow|i\/events|i\/moments)(\w+){1,15}(?:\/(?:(status|lists))?)?(?:\/([0-9a-zA-Z-_]+)(?:\?.+)?)?$/;
    으로 바꿔주면 되는 것 같습니다.

    미디어 임베드 애드온은 테스트를 안 해봐서 잘 모르겠습니다만,
    거기에서도 _ckeditor.js 파일이 있을 텐데 위의 방법으로 테스트해보세요.
  • profile ?
    감사합니다 윤삼님.^^ twitter,x 둘다 잘 작동하네요!
  • ?

    라이믹스 1.9X버전으로 미디어 임베드를 쓰고 있는데
    관리자 아이디로 링크걸고 글을 업로드하면 임베드도 잘되고 카드 안에 내용도 잘보이는데
    관리자가 아닌, 일반회원의 아이디로 접속한 상태에서 링크를 걸고 글을 업로드하면
    카드 안에 내용이 아예 보이지 않습니다
    그냥 흰색으로 채워지네요

    근데 또 글쓰고있는 중에는 임베드가 잘되서 카드 내부 내용이 잘보입니다

    글을 등록만 하면 자꾸 사진처럼 아무것도 안보이네요..

    방법이 있을까요?

    스크린샷 2023-08-24 오전 9.10.28.png

    스크린샷 2023-08-24 오전 9.10.42.png

     

  • ? profile
    관리자는 되는데 비관리자에게서는 iframe의 src 속성이 아예 날아가버렸다면,
    아마도 보안설정 > 외부 멀티미디어 허용에서 www.instagram.com이 빠져 있는 게 아닌가 싶습니다.
    https://dev.aporia.blog/board_fKje44/36577 참고
  • profile ?

    스크린샷 2023-08-24 오전 10.22.54.png

    그것도 확인해보았는데

    instagram이 들어가 있습니다..

    다른 애드온들을 껏다 켜보기도 했는데 해결되진 않네용..

    그래서 프리뷰를 설치해서 해보았는데

    $this when not in object context
    이런 말이 뜨면서 오류가 떠서 관리자 페이지에서 모듈 설정페이지 자체가 안들어가 지더라구용..

     

    그리고 글을 작성할때는

    스크린샷 2023-08-24 오전 10.26.50.png

    이렇게 잘나오는데 등록을 누르면 갑자기 소스코드가 변하면서 흰배경만 나오네용..

  • profile ?
    보안설정에있는 iframe 란에 말씀해주신 각종 링크를 넣었더니 되는군요!!
    감사합니다!!
  • profile
    카카오 문제생긴거 같은데? 맞나여~~ 카드형식으로만 불러오네영
  • profile profile
    카드가 나온다면 링크 프리뷰 모듈 쓰시나요?
    만약 그렇다면 이쪽 댓글로 문의해주세요.
    https://xetown.com/download/1724355
    그리고 문제되는 url도 알려주시면 좋겠습니다~
  • profile profile
    관심 감사합니다

    넹 관련사항 다음에는 더 자세히 알려드릴게여 ㅋ

    업데이트하셔서 웬지 잘될거같은데 테스트 해보고....우와!~~

    아름답습니다!! 모듈짱이에요~~
  • profile
    윤삼님 감사합니다~!!!!!!!!
  • ?

    윤삼님.. 공유해 주신 인스타 애드온 질 사용하고 있습니다. 감사합니다. 다름아니라...  첨부이미지와 같이 사이즈가 자동으로 스마트폰에 맞춰지는데 불러 온 인스타 화면을 제가 원하는 사이즈 또는 좀더 키울수 있는 방법이 잇는지요? 

    20220903_172821.jpg

     

  • ? profile
    custom.css 파일 하단에

    .media_embed.instagram-embed .instagram-media {
    max-width: none !important;
    }

    라고 입력해서 사용해보세요.
  • profile ?
    감사합니다.~^^
  • profile ?
    바로 해결이 되었네요. 추석 잘 보내세요~
  • ?
    php 7.4에서만 작동이 되나요? 예전 xe 모듈과 위젯들을 사용하려 7.0으로 다운그레이드를 해서 라이믹스를 사용중인데.. 7.4이상이 되어여ㅑ 하는지?
  • ? profile
    7.0에선 테스트해보지 않아서 잘은 모르겠는데 아마 큰 무리는 없지 않을까 싶습니다.
  • ?
    잘 사용하겠습니다. 감사합니다.
  • profile
    이거 너무 좋습니다... 감사합니다...^^
  • profile
    꾸준한 업데이트 감사드립니다~~ 너무 좋아요~~
  • profile
    윤삼님 너무 감사합니다!!!!!!!!!!
  • ?

    버거 라기 보다는 0.4버전 이후로
    시스템설정 > 고급 설정 >
    스크립트 자동 압축, 스크립트 합치기를
    모든 파일을 압축 and JS만 합침 or CSS와 JS를 모두 합침을 사용으로 선택시

    확장변수 출력 안됨
    메뉴 토글 안됨
    CK에디터 본문 입력부분 출력 되지 않습니다.

  • ? profile
    네, 그 즈음부터 압축시 뭔가를 깨뜨리는 코드가 들어갔는가 보더라구요.
    제가 뭔가 발견해낸 것일 수도 있는데ㅎㅎ 그게 뭔지는 잘 모르겠더라구요;;;
  • ? profile
    와 이 이슈때문에 업데이트를 못하고있었는데 이문제였군요!
    덕분에 최신버전 적용잘했습니다 감사합니다!
  • profile
    라이믹스 사용이 즐거운게 윤삼님 덕분이군요 .. !!
  • profile profile
    저도 즐겁습니다~ 룰루랄라~~
  • profile
    모바일 버전에서
    이미지 + 유튜브 영상이 나옵니다.

    PC에서는 유튜브 영상만 정상적으로 출력이 되구요.
    윤삼님 소개페이지에 보면 영상들이 모바일에서 가로 꽉차게 사이즈가 되어 있지만

    저 같은 경우 작게 출력이 됩니다.
    제가 설정을 잘못 한 것일까요?
  • profile profile
    글쎄요. 혹시 보안 설정에서 누락된 class 같은 게 있을까요?
  • profile profile
    설정방법에 있는 class모두 복사 붙여넣기 했는데 그렇네요
    운영하는 다른사이트도 마찬가지네요
    서드파티 에디터 자동완성 모듈 때문인것 같은 예상은 됩니다.
  • profile
    아니 도대체 능력치가 어디까지 입니까? 쭉 지켜 봐 왔지만 정말 대단하십니다.
    감사히 잘 사용하겠습니다.
  • profile profile
    제법 성장했지요? ㅎㅎㅎㅎ
  • profile
    이번 업데이트 이후 custom.css 파일에서 text-align: left; 을 넣어도 좌측정렬이 되지 않는 문제가 있습니다!!ㅎㅎ

    .media_embed_wrapper {
    margin: 0 auto; text-align: left;
    }
  • profile profile
    일단 text-align: left !important; 로 응급 처치해보시구요.
    오늘 오후 좀 늦은 시간에 직접 확인해보도록 하겠습니다~
  • profile profile
    확인했습니다.
    .media_embed_wrapper {
    margin: 0; text-align: left;
    }
    이라고 해보세요.
    제가 사용하던 파일이 압축으로 묶여서 그렇게 된 것 같아요.
    혹시 다음 버전이 나오게 된다면 custom.css는 아무래도 빈 파일로 제공을 해야겠네요;;;
  • profile profile
    네. 이렇게 하니깐 잘 작동됩니다!!ㅎㅎ 감사합니다
  • ?
    와... 드디어!!! 정말 대박 애드온입니다.
    그런데 윤삼님... 요즘 너무 무리하시는 건 아닌지 걱정됩니다.
  • ? profile
    네, 조만간 잠수를 좀 타야 해서 그 전에 정리 좀 하려구요ㅎㅎㅎ
  • profile
    헐,, 아마존에 유튜브 뮤직까지...
    대댓글도 하시면서 두개나...!!
    항상감사드립니다!!
  • profile profile
    이번 컨셉은 책과 음악입니다ㅋㅋ
    유튜브 뮤직 부분도 좀 더 다듬긴 해야 하는데(기능면에선 괜찮아요ㅋ), 아프리카쪽 주소 체계 변경이 급해서 일단 공유하게 됐습니다~
  • profile profile
    주소체계가 자주 바뀐다면........이거 보통일이 아니겠어요
  • profile profile
    이런 일들이 종종 있죠. 특히나 페북이나 인스타는 정책을 자주 바꾸기로 유명하기도 하구요ㅎㅎ
  • profile
    윤삼님 홈페이지 버그제보 글 올리려고하니깐

    reCAPTCHA 스팸방지 기능을 체크해 주십시오.

    라고 뜨네요. 아무리찾아봐도 화면에 안보이는데 방지기능이 어딨는지 모르겠습니다
  • profile profile
    어, 왜 그럴까요...?
    일단 미사용으로 해뒀습니다.
    글 남겨주세요~
  • ?
    장시간의 고통과 고민을 한 방에 날려버리는 애드온 정말 감사합니다. 더구나 이런 애드온을 무료 배포라니...
    귀한 애드온을 만드시느라 노력하신 만큼 잘 사용하겠습니다.

    이건 그냥 질문입니다. 전혀 부담 갖지 마세요. 혹시 유튜브 뮤직은 지원 안되나요?
  • ? profile
    도전은 해보고 싶은데 당분간은 시간이 없을 듯해서 보장은 못하겠네요ㅜ
  • ? profile
    유튜브 뮤직 지원이라면,
    1) 오디오 플레이어로의 재생을 원하시는 건가요?
    2) 아니면 유튜브 뮤직 주소만 인식을 하고, 콘텐츠는 그냥 지금처럼 동영상으로 재생돼도 괜찮은 건가요?
  • profile ?
    2번 그냥 유튜브 처럼 주소만 인식 되어도 괜찮습니다.
    너무 부담 느끼지 마세요. 지금 기능 만으로도 훌륭해요. ^^
  • ? profile
    ㅎㅎ 네~
    유튜브 뮤직은 주소 체계를 잘 몰라서 확신은 없는데요.

    _ckeditor.js 76행 유튜브 정규식 부분을 보면,
    (?:(?:www|m).)?(?:youtube.com|youtu.be)
    이런 부분이 있을 텐데요. 이 사이에 (?:music.)?을 끼워주면 아마 될 것도 같습니다.
    즉 이렇게 바뀌는 거죠.
    (?:(?:www|m).)?(?:music.)?(?:youtube.com|youtu.be)
  • profile
    0.5.2버전 업데이트 감사합니다~
  • profile
    감사합니다 윤삼님!
  • profile
    감사합니다. 0.5.1버전 업데이트하러 갑니다 :)
  • profile
    안되는게 없는 애드온은 처음 ㅋㅋ
  • profile
    감사합니다. 너무 잘됩니다!
  • profile
    업데이트 감사합니다. 정말 잘쓰고있습니다!
  • profile
    아프리카VOD 무한으로 콘텐츠를 로딩중이라는 팝업발생합니다.



    1. 크롬 애드블럭 사용시

    2. 19금이 걸린 VOD
  • profile profile
    애드블럭 사용시 문제는 도와드리기 힘든 이슈인 것 같구요.
    19금은 ... 로딩 시간이 길어지면 임베딩을 중지하는 커맨드가 있으면 좋을 것 같네요.
    장담은 어렵지만 참고해보는 것으로 하겠습니다.
  • profile profile
    맞습니다.. 저도 최근에야 알았습니다.
    애드블럭문제인줄은 꿈에도 몰랐어요.
    끄고하니까 잘되더라구요.
  • profile
    인스타 왜 안되나 봤는데 릴스는 아직 안되나봅니다. 좋은 자료 감사합니다.
    네이버 뭐가 바뀐건지 오디오북, vlive, 네이버tv는 안되는거 같습니다.
    사운드클라우드도 어떤건 되고 어떤건 안되네요 (어플에서 링크 복사일 경우 안되는 것 같습니다)
    트위치는 거부한다고 뜹니다. 그래도 주요 메인들은 되서 잘 쓰겠습니다.
  • profile profile
    플랫폼 별로 임베딩을 제공해주는 api가 바뀌곤 해서 그걸 따라가기가 쉽지 않은 일인 것 같습니다.
    다른 개발자분이 좀 해주시면 좋을 것 같은데, 품이 많이 들어가는 일이어서 어려운 일이긴 하죠;;;
  • profile
    링크 텍스트도 표시를 설정해도 글 등록시 링크텍스트가 증발합니다.


    링크텍스트처리: 링크텍스트도 표시 (표시가 안되고 삭제가 되네요. 유튜브,트위터는 정상적으로 불러와집니다 그런데 URL주소는 남지 않고 없어지네요)
  • profile profile
    오랜만에야 댓글 남깁니다ㅜ
    그게 제 기억에는 버전업 준비하던 소스가 공개됐었어서 그런 것 같아요.
    해당 기능은 일단 무시하고 쓰셔야 할 것 같습니다.
    (물론 이미 그렇게 사용 중이실 것 같네요. 아니면 폐기...)
  • profile
    감사합니다 ( - - ) ( _ _ )
  • profile
    감사합니다
  • profile
    감사히 잘 사용하겠습니다~~~ ^^
  • ?
    아직 임베드 정렬 좌,우,중앙 설정이 불가능 하군요 ㅠㅠ 아쉽지만 그래도 잘 사용하고있습니다
  • profile
    수고하셨습니다!!!
    업데이트하니까 정상출력되네요!!

    정말 최고에요!
  • profile
    드이어 4.0 버전이네요! 감사 합니다!!
  • profile profile
    더 지체하면 안 될 것 같아 작업 중이던 것을 일단 중간 정리해서 공개했어요.
    https://xetown.com/point_contents/1564278#user_content_1-040
    업데이트 내용 확인하시고 적용해주세요~
  • profile profile
    이미 적용 했습니다. 핀터레스트부터 테스트 해봤는데 매우 잘되네요. 정말 고생하셨습니다.
  • profile
    수고많으셨습니다
  • profile
    안녕하세요!
    제 홈페이지에 적용해보려고 하는데
    유튜브,비메오 같은건 정상 출력되는데 트위터가 출력이 안되서요ㅜ
    위에 설명해주신대로 코드 넣고 그랬는데 어떤 문제가 있는지 모르겠어서 글 남겨 보아요 ㅜ
    https://voiceits.com/test/38799
    데모사이트에서도 정상 출력되는데 뭐가 문제인지 알수있을까요?
  • profile profile
    의견이나 문의는 이쪽에 남겨주세요. https://xetown.com/topics/1564294
    링크 페이지 검토 결과, 사용하시는 다른 서드파티 자료와 충돌이 있는 것 같습니다.
  • profile profile
    답변 감사합니다 다른 애드온 꺼보면서 다시 확인해봐야겠네요
  • profile
    안녕하세요. 오랜만에 댓글을 남기네요 ㅎㅎ
    적용이 조금늦었습니다만 정말 좋은애드온이네요,, 언제나그렇듯 별 5개입니다 ㅎㅎ
    라이믹스 필수 애드온 제작자 윤삼님 감사드립니다!
  • profile
    주소를 입력하자마자 바로 출력이 되어서 깜짝 놀랐습니다.
  • profile
    굳
  • profile
    선추후사 괴물 애드온이네요. 기존에 유튜브 출력 애드온은 삭제하면 되는걸까요?
  • profile profile
    네, 그러셔도 됩니다~
  • profile
    최고입니다!
  • profile
    이제서야 설치하네요.
    감사합니다.
  • profile profile
    필요한 사항 있으면 언제든 문의 주세요~
  • profile profile
    넵 지금 설치해서 테스트 중입니다.
    문제점이 보이면 피드백 드리겠습니다.
    감사합니다.
  • profile
    엄청난 작업을 하셨네요! 감사드립니다!
  • profile profile
    ㅎㅎㅎ 여유 있으실 때 피드백도 부탁드려요~
  • profile profile
    알겠습니다! 넘넘 수고많으세요 ^^
  • ?
    정말 감사합니다!! 트위치 사운드클라우드까지 되다니 너무 좋아요 ㅠㅠ
  • ? profile
    근데 트윗치 iframe이 반응 속도가 좀 느린 게 흠이라면 흠이더라구요. 흠..
  • profile
    멎지네요 역시 윤삼님!
  • profile profile
    애용 부탁해용~
  • ?
    믿고쓰는 최고의 자료 항상 감사합니다!
  • ? profile
    버그 발견되면 말씀해주세요~~
    https://xetown.com/topics/1564294
목록