동영상 넣기

동영상 사이트의 주소만 붙여 넣으면 플레이어가 들어갑니다. 파일을 올리는 것이 아니라 그 사이트의 플레이어를 끼워 넣습니다.

createEditor('#editor', {
  toolbar: 'video embed | undo redo',
  height: 380,
});

넣는 방법

• 툴바의 동영상(video) 단추를 누르고 주소를 붙여 넣습니다. 알아볼 수 없는 주소면 "지원하지 않는 동영상 주소예요"가 뜹니다.
• 본문에 동영상 주소만 붙여 넣으면 먼저 링크로 들어가고 "동영상으로 넣기" 안내가 뜹니다. 누르면 링크가 플레이어로 바뀝니다.
• 빈 줄에서 / 를 치고 "동영상"이나 "유튜브"를 찾기.
• 지도·퍼가기 코드(embed) 창에 동영상 주소나 iframe 코드를 넣어도 동영상으로 들어갑니다.

알아보는 주소

저장되는 HTML

<div data-video="youtube" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" title="youtube video"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0"
    allowfullscreen allow="…" loading="lazy"></iframe>
</div>

16:9 상자가 인라인 스타일이라 보기 화면에서도 휴대폰 너비에 맞게 줄어듭니다. 에디터 안에서 동영상은 한 덩어리로 다뤄져 안을 고칠 수 없고, 지우거나 옮길 수만 있습니다.

허용되는 iframe

에디터는 허용된 사이트의 iframe 만 남깁니다. 기본은 위 동영상 사이트(www.youtube.com, www.youtube-nocookie.com, player.vimeo.com, tv.naver.com, play-tv.kakao.com, www.dailymotion.com)와 구글 지도입니다. 다른 사이트의 iframe 이 setHTML 이나 붙여넣기로 들어오면 빠지고 "허용되지 않은 사이트의 iframe {n}개를 뺐어요" 안내가 뜹니다. 더 허용하려면 allowedIframeHosts 를 쓰세요 (지도·퍼가기 코드). 서버의 허용 목록도 맞춰야 합니다 (보안).

툴바에서의 위치

video 는 board 와 full 프리셋의 첫 줄에 있습니다.

코드에서 바로 넣으려면 editor.exec('insertVideo', 'https://youtu.be/…'). 알아볼 수 없는 주소면 아무 일도 하지 않습니다.

옵션