ckeditor로 유튜브 링크 삽입하고 불러오기

http://hoowave.dothome.co.kr/

장뽕뽕

개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다..

---

 

게시판에서 게시글을 작성할 때, 유튜브 공유 URL을 가져와 내용 본문에 첨부하고 싶을 때가 있습니다.

ckeditor에서 제공하는 기능을 이용해서 게시글 본문에 동영상을 넣어볼게요.

 

ckeditor를 불러온 뒤, 비디오 모양을 누르면 url을 입력하라고 합니다.

유튜브 공유 링크를 누르고 초록색 체크 버튼을 누르면..

 

본문 내용에 유튜브 동영상이 삽입됩니다.

이 상태로 게시글을 등록하게 되면..

 

db에 html 형식으로 내용이 입력됩니다.

 

하지만 게시글을 불러올 땐 동영상이 출력되지 않습니다. iframe으로 변환시켜서 출력해 줘야 돼요.

db에 입력할 때 변환시켜서 저장해 줘도 되지만

저는 불러올 때 뷰 페이지에서 변환시켜서 사용해 줬어요.

 

뷰 패이지 스크립트

 

<script>
	$(document).ready(function() {
		document.querySelectorAll('oembed[url]').forEach(element => {
			var url = element.attributes.url.value;
			var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
			var matchs = url.match(regExp);
			element.parentElement.outerHTML = `
    <div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">
        <iframe src="https://www.youtube.com/embed/${matchs[7]}?rel=0" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    </div>`;
		});
	})
</script>

 

유튜브 동영상의 고유코드를 가져와서 iframe 틀을 만들고 그 안에 링크를 다시 조합시켜줍니다.

이렇게 하면 입력과 동일하게 동영상 출력도 정상적으로 됩니다~!