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.

`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

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`