URL의 비디오를 iframe으로 생성하기

3.1.2501 버전부터 지원, 2.19.2501 버전부터 지원합니다.

editor.upload.video.embedURLTransformers에 도메인을 등록하면, 해당 URL의 비디오가 업로드될 때 iframe으로 생성됩니다.

다음은 기본적으로 지원되는 도메인 설정입니다. 이 외의 URL은 video 태그로 생성됩니다.

// synapeditor.config.js
'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 앞에 오는 경로를 설정합니다.해당 경로가 있는 URL을 변환할 때 사용할 `embedTemplate`을 설정합니다.	아래 `pathParts`를 참고합니다.
`parameter`	ID가 특정 키의 값으로 들어 있는 URL 쿼리 매개변수입니다.해당 키가 있는 URL을 변환할 때 사용할 `embedTemplate`을 설정합니다.	아래 `parameter`를 참고합니다.
`embedTemplate`	URL을 임베드 URL로 변환하는 데 사용되는 템플릿입니다. `{id}`는 URL에서 추출된 ID로 대체됩니다.	`'https://youtube.com/embed/{id}'`는 ID를 사용하여 URL을 YouTube 임베드 URL로 변환합니다.아래 `embedTemplate`를 참고합니다.

`pathParts`

'youtu.be': {
    pathParts: {
        '': 'https://www.youtube.com/embed/{id}' // when the ID is right after the domain
    }
}

https://youtu.be/-VI9Jp5807s → https://www.youtube.com/embed/-VI9Jp5807s

'youtube.com': {
  pathParts: {
        'shorts': 'https://www.youtube.com/embed/{id}', // when the ID is after 'shorts'
        'live': 'https://www.youtube.com/embed/{id}'  // when the ID is after 'live'
    }
}

https://www.youtube.com/shorts/T5fbNMuTTlA → https://www.youtube.com/embed/T5fbNMuTTlA

https://www.youtube.com/live/EGxyllsUt6E → https://www.youtube.com/embed/EGxyllsUt6E

`parameter`

'youtube.com': {
    parameters: {
        'v': 'https://www.youtube.com/embed/{id}'
    }
}

https://www.youtube.com/watch?v=-VI9Jp5807s → https://www.youtube.com/embed/-VI9Jp5807s

`embedTemplate`

변환된 URL의 도메인이 원래 URL의 도메인과 다를 경우, 비디오가 iframe으로 생성되려면 새로운 도메인도 editor.upload.video.embedURLTransformers에 등록되어야 합니다.

'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으로 변경됩니다.

이 경우, iframe이 생성되려면 youtube.com도 editor.upload.video.embedURLTransformers에 등록되어 있어야 합니다.

원본 URL	변환된 URL	미리보기
`https://youtu.be/-VI9Jp5807s`	`https://www.youtube.com/embed/-VI9Jp5807s`