...
'editor.upload.video.embedURLTransformers'에 도메인을 등록하면 해당 URL의 비디오를 업로드할 때 iframe으로 생성됩니다.
다음은 기본적으로 지원하는 Domain 설정으로 이외에는 비디오 태그로 생성됩니다.
| Code Block |
|---|
| language | js |
|---|
| title | synapeditor.config.js |
|---|
| collapse | true |
|---|
|
'editor.upload.video.embedURLTransformers': {
'youtube.com': {
pathParts: {
'shorts': 'https://www.youtube.com/embed/{id}',
'live': 'https://www.youtube.com/embed/{id}',
},
parameters: {
'v': 'https://www.youtube.com/embed/{id}'
}
},
'youtu.be': {
pathParts: {
'': 'https://www.youtube.com/embed/{id}'
}
},
'tv.naver.com': {
pathParts: {
'v': 'https://tv.naver.com/embed/{id}',
' |
...
h': 'https://tv.naver.com/embed/{id}'
}
},
'tv.kakao.com': {
pathParts: {
'livelink': 'https://play-tv.kakao.com/embed/player/livelink/{id}',
'cliplink': 'https://play-tv.kakao.com/embed/player/cliplink/{id}',
'v': 'https://play-tv.kakao.com/embed/player/cliplink/{id}'
}
},
'play-tv.kakao.com': {
pathParts: {
'livelink': 'https://play-tv.kakao.com/embed/player/livelink/{id}',
'cliplink': 'https://play-tv.kakao.com/embed/player/cliplink/{id}',
'v': 'https://play-tv.kakao.com/embed/player/cliplink/{id}'
},
},
'chzzk.naver.com': {
pathParts: {
'clips': 'https://chzzk.naver.com/embed/clip/{id}'
}
},
'vod.sooplive.co.kr': {
pathParts: {
'player': 'https://vod.sooplive.co.kr/player/{id}/embed'
}
},
'play.sooplive.co.kr': {
pathParts: {
'': 'https://play.sooplive.co.kr/ |
...
{id}/embed'
}
},
'vimeo.com': {
pathParts: {
'': 'https://player.vimeo.com/video/{id}'
}
},
'player.vimeo.com': {
pathParts: {
'video': 'https://player.vimeo.com/video/{id}'
}
},
} |
| 구성 | 설명 | 예시 |
|---|
| pathParts | URL에서 ID 앞에 위치한 경로(Path)를 설정합니다.
해당 경로가 있는 경우 변환할 embedTemplate 설정합니다. | |
...
...
'': 'https://www.youtube.com/embed/{id}' // 도메인 바로 뒤에 ID가 있는 경우 |
|
...
...
...
...
...
'shorts': 'https://www.youtube.com/embed/{id}', // ID가 'shorts' 뒤에 있는 경우 |
|
...
'live': 'https://www.youtube.com/embed/{id}' // ID가 'live' 뒤에 있는 경우 |
|
...
...
|
| parameter | URL에서 ID가 특정 키의 값으로 설정된 파라미터를 의미합니다. 해당 키가 있는 경우 변환할 embedTemplate 설정합니다. |
| Code Block |
|---|
'youtube.com': { |
|
...
...
'v': 'https://www.youtube.com/embed/{id}' // |
|
...
ID가 파라미터 v의 값으로 설정된 경우 }
} |
|
| embedTemplate | URL을 embed 형태로 변환하기 위한 템플릿입니다. | - embedTemplate: 'https://youtube.com/embed/{id}' - ID를 이용해 embed 형태의 YouTube URL로 변환
| Note |
|---|
embedTemplate 형태로 URL을 변환할 때 기존 Domain과 변환된 URL의 Domain이 달라질 경우, editor.upload.video.embedURLTransformers에 새로운 Domain을 등록해야 비디오를 iframe으로 생성할 수 있습니다. ex) |
|
...
...
'editor.upload.video.embedURLTransformers': {
'youtu.be': {
pathParts: {
'': 'https://www.youtube.com/embed/{id}'
}
},
'youtube.com': {
pathParts: {
'shorts': 'https://www.youtube.com/embed/{id}',
'live': 'https://www.youtube.com/embed/{id}',
},
parameters: {
'v': 'https://www.youtube.com/embed/{id}'
}
}
} |
https://youtu.be/-VI9Jp5807s URL을 https://www.youtube.com/embed/-VI9Jp5807s로 변환했을 때, 도메인이 youtu.be에서 |
|
...
...
youtube.com을 editor.upload.video.embedURLTransformers에 등록해야 iframe으로 생성됩니다. |
|
| 원본 URL | 변환된 URL | 미리보기 |
|---|
 Image Modified | |  Image Modified
|
