소개
CKEditor에 미디어 사이트의 링크를 '붙여넣기'하면 임베드 코드로 '바로 변환' 시켜주는 애드온
설치경로
/addons/media_embed
지원환경
- Rhymix 2.0.12
- PHP 7.4
- 크롬 버전 89.0.4389.114(공식 빌드) (64비트)
- CK에디터4(라이믹스 내장)
- 따라서 사용환경에 따라, 브라우저에 따라 이슈가 있을 수 있습니다.
라이선스
GPL v2
1. 보안 설정
- 원활한 임베딩을 위해 관리자 페이지에서 다음과 같은 설정이 필요합니다.
1) 설정 > 시스템 설정 > 보안 설정 > 외부 멀티미디어 허용에 다음을 추가
www.airbnb.co.kr m.afreecatv.com play.afreecatv.com vod.afreecatv.com read.amazon.com music.amazon.com embed.music.apple.com player.audiop.naver.com bandcamp.com player.bilibili.com codepen.io codesandbox.io www.dailymotion.com discordapp.com www.ellentube.com share.ellentube.com www.facebook.com live.fc2.com video.fc2.com embedr.flickr.com embed.gettyimages.com media.gettyimages.com gfycat.com giphy.com books.google.com www.imdb.com imgur.com www.instagram.com em.iq.com jjalbot.com jsfiddle.net tv.kakao.com play-tv.kakao.com www.mixcloud.com m.sports.naver.com view.shoppinglive.naver.com tv.naver.com vibe.naver.com embed.nicovideo.jp live.nicovideo.jp share.podbbang.com prezi.com v.qq.com www.redditmedia.com www.relive.cc slideshare.net www.slideshare.net w.soundcloud.com open.spotify.com streamable.com embed.ted.com tenor.com www.tiktok.com embed.tumblr.com tv.sohu.com play.tvcf.co.kr clips.twitch.tv player.twitch.tv platform.twitter.com player.vimeo.com vlive.tv player.youku.com www.youtube.com
2) 설정 > 시스템 설정 > 보안 설정 > HTML class에 다음을 추가
media_embed_wrapper media_embed airbnb-embed amazon-book-embed amazon-music-album amazon-music-embed amazon-music-track apple-music-embed audioclip-embed azquotes-embed bandcamp-embed bar codepen-embed codesandbox-embed discord-embed extra fb_iframe_widget fb_iframe_widget_fluid_desktop fb-post fb-video fb-xfbml-parse-ignore flickr-embed flickr-embed-video gettyimage-embed gfycat-embed gfycat-embed-group gfycat-embed-single giphy-embed giphy-embed-photo giphy-embed-video google-books-embed imgur-embed imgur-embed-iframe-pub instagram-embed instagram-media instagram-media-rendered jjalbot-embed jsfiddle-embed mixcloud-embed nico-embed-live nico-embed-video pinterest-board pinterest-embed pinterest-pin pinterest-profile podbbang-embed progress reddit-embed relive-embed remote soundcloud-embed spotify-embed tenor-video-embed tiktok-embed timer tumblr-embed tumblr-embed-loaded tumblr-post twitter-list twitter-profile twitter-status twitter-timeline twitter-tweet volume wikipedia-embed xi-bars xi-expand-square xi-pause-o xi-play xi-refresh-l xi-repeat xi-shuffle xi-step-backward-o xi-step-forward-o xi-volume-max xi-volume-mid xi-volume-min xi-volume-off youtube-music youtube-music-controls youtube-music-desc youtube-music-table-wrapper youtube-shorts
3) 에디터 > 공통 설정 > '플러그인 제거' 입력란에 iframe 을 기입
2. CK에디터 플러그인 설치
1) https://ckeditor.com/cke4/addon/notification 에서 플러그인 다운로드
2) 압축 해제 후, 루트/common/js/plugins/ckeditor/ckeditor/plugins/notification 으로 업로드
3) '관리자 페이지 > 콘텐츠 > 에디터 > 공통 설정 > 추가 플러그인 로드'에 'notification'을 추가
3. 지원 사항
본 애드온은 미디어 임베딩과 관련하여 다음과 같은 사항을 지원합니다.
서비스 | 비고 | 썸네일 | 안정성 |
---|---|---|---|
아프리카TV | vod, 라이브 | 썸네일 | 높음 |
Airbnb | 숙소, 체험 | 높음 | |
Amazon BOOK | 킨들 프리뷰 | 썸네일 | 높음 |
Amazon MUSIC | 싱글, 앨범, 아티스트, 플레이리스트 | 썸네일 | 높음 |
Apple MUSIC | 싱글, 앨범, 플레이리스트, 비디오, 라디오(로그인) | 썸네일 | 높음 |
오디오클립 | 오디오 | 썸네일 | 높음 |
AZQuotes | 이미지 | 썸네일 | 높음 |
Bandcamp | 음악 | 썸네일 | 보통 |
Bilibili | vod, 방송 클립 | 썸네일 | 보통 |
Codepen | 코드 | 썸네일 | 높음 |
Code Sandbox | 코드 | 썸네일 | 높음 |
Dailymotion | vod | 썸네일 | 높음 |
다음 VOD | 뉴스, 스포츠, 연예, 영화 트레일러, 자동차 | 썸네일 | 높음 |
Discord | 초대 위젯 | 높음 | |
Ellentube | 방송 클립 | 썸네일 | 보통 |
포스트, 비디오 | 보통 | ||
FC2 | vod, 라이브 | 썸네일 | 높음 |
Flickr | 포토, 갤러리, 비디오 | 썸네일 | 보통 |
Gettyimages | 포토, 비디오 | 썸네일 | 높음 |
Gfycat | gif, 비디오 | 썸네일 | 보통 |
Giphy | gif, 비디오 | 썸네일 | 보통 |
Google BOOKS | 미리보기 | 썸네일 | 보통 |
IMDb | vod | 썸네일 | 낮음 |
Imgru | 포토, 갤러리, 비디오 | 썸네일 | 낮음 |
포스트, TV, Reel | 높음 | ||
IQiyi | vod + 자막 | 썸네일 | 높음 |
짤봇 | gif | 썸네일 | 보통 |
JSFiddle | 코드 | 보통 | |
카카오TV | 비디오, 라이브, 숏 | 썸네일 | 높음 |
Mixcloud | 음악 | 썸네일 | 높음 |
MLB.com | 비디오 + 자막 | 썸네일 | 보통 |
네이버TV | 비디오, 라이브 | 썸네일 | 보통 |
네이버VOD | 뉴스, 스포츠, e-스포츠, 영화트레일러, 라이브, 쇼핑라이 | 썸네일 | 보통 |
네이버Vibe | 음악 | 썸네일 | 보통 |
Niconico (ニコニコ) | 비디오, 라이브 | 썸네일 | 보통 |
핀, 보드, 프로필 | 썸네일 | 높음 | |
Podbbang | 팟캐스트 | 썸네일 | 보통 |
Prezi | 프리젠테이션, 비디오 | 썸네일 | 보통 |
비디오 | 일부 | 낮음 | |
포스트 | 일부 | 높음 | |
Relive | 비디오 | 썸네일 | 낮음 |
SlideShare | 프리젠테이션 | 썸네일 | 높음 |
SoundCloud | 음악 | 썸네일 | 높음 |
Spotify | 음막(미리듣기) | 썸네일 | 높음 |
Streamable | 비디오 | 썸네일 | 높음 |
TED | 비디오 | 썸네일 | 높음 |
Tenor | gif | 썸네일 | 낮음 |
Tiktok | 포스트 | 썸네일 | 보통 |
Tudou | vod | 썸네일 | 낮음 |
Tumblr | 포스트 지원 | 썸네일 | 보통 |
TV Sohu | vod | 썸네일 | 보통 |
TVCF | 비디오 | 썸네일 | 높음 |
Twitch | vod, 라이브 | 썸네일 | 낮음 |
포스트, 개인 타임라인, 리스트 | 보통 | ||
Vimeo | 비디오 | 썸네일 | 높음 |
Vlive | vod | 썸네일 | 낮음 |
Wikipedia | 문서 | 썸네일 | 보통 |
Youku | vod | 썸네일 | 낮음 |
Youtube | 비디오, 쇼츠, 뮤직 | 썸네일 | 보통 |