ckeditor youtube 넣기

ckeditor 에서 youtube 를 추가하고 글 작성을 완료하면 내용이 없어지는 현상 발생..

일단 글등록시 html_purify 를 사용중이라면 config 설정 부분에 두줄을 추가해 준다.

$config->set('HTML.SafeIframe', true);
$config->set('URI.SafeIframeRegexp', '%^(https?:)?//(www\.youtube(?:-nocookie)?\.com/embed/|player\.vimeo\.com/video/)%');

이후 글을 작성완료하면 DB에 데이터는 정상으로 들어가는 것을 확인할 수 있다.

하지만 수정하기 페이지로 들어가면 다시 코드가 사라지는 현상이 발생한다.
ckeditor 의 config.js 에 아래 내용을 추가해 줍니다.

CKEDITOR.editorConfig = function( config ) {
	config.allowedContent = true;
};

화면에 등록된 youtube 영상이 보이지는 않지만 iframe이라는 박스가 생긴것을 확인할 수 있다.

여기서 또 발생된 문제가.. 반응형 너비를 설정하면 등록은 되어 있으나 사용자 페이지에 보이지 않는 현상이 발생된다.

고정된 사이즈는 iframe 만 들어가는데 반응형은 div태그 안에 iframe을 넣고 있는것을 확인할 수 있고, div는 position 이 relative, iframe 은 position 이 absolute 로 설정되어야 보여진다.
다음과 같이 CSS를 추가해 주면 정상적으로 보이는걸 확인할 수 있다.

.youtube-embed-wrapper {position:relative;}
.youtube-embed-wrapper iframe {position:absolute; top:0; left:0;}