Create Video as Iframe from URL

Release 3.1.2501 and above, Release 2.19.2501 and above.

When you register domains in editor.upload.video.embedURLTransformers, videos from those URLs are created as iframes when uploaded.

The following are the default supported Domain settings. URLs other than these are created as video tags.

// 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}'
        }
    },
}

Composition	Description	Example
`pathParts`	Sets the path that precedes the ID in the URL.If that path exists, set the `embedTemplate` to transform to.	See `pathParts` below.
`parameter`	A parameter in the URL where the ID is set as the value of a specific key.If that key exists, set the `embedTemplate` to transform to.	See `parameter` below.
`embedTemplate`	The template used to transform the URL into an embed URL. `{id}` is replaced with the ID extracted from the URL.	`'https://youtube.com/embed/{id}'` transforms the URL into a YouTube embed URL using the ID.See `embedTemplate` below.

`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`

If the domain of the transformed URL differs from the domain of the original URL, the new domain must also be registered in editor.upload.video.embedURLTransformers for the video to be created as an iframe.

'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}'
        }
    }
}

When https://youtu.be/-VI9Jp5807s URL is transformed to https://www.youtube.com/embed/-VI9Jp5807s, the domain changes from youtu.be to youtube.com.

In this case, youtube.com must also be registered in editor.upload.video.embedURLTransformers for the iframe to be created.

Original URL	Transformed URL	Preview
`https://youtu.be/-VI9Jp5807s`	`https://www.youtube.com/embed/-VI9Jp5807s`