Developers can use code to add VOD Embed.

VOD embed guide


Developers can use code to add VOD Embed.

- Embed using Script:

    ```html
    <script src="https://****/zoomevents-vod-sdk/{versioin}/vod_embed_sdk/zoomVodEmbed.js"></script>
    ```

- Embed using Dom:

    1. Thumbnail inline mode

        ```html
        <div
            class="zoom-embed"
            style="width:100%;height:100%;"
            data-channel-id="_*****__*****_******"
            data-video-id="_*****__*****__*****_*"
            data-embed-option="inline"
            data-embed-display="thumbnail"
            data-domain="https://****.zoom.us"
        >
            <img
                src="https://onzoomcontent3.zoom.us/img/default_session_image.jpg"
                style="width:100%;"
            >
        </div>
        ```

    2. Thumbnail popover mode

        ```html
        <div
         class="zoom-embed"
         style="width:100%;height:100%;"
         data-channel-id="_*****__*****_******"
         data-video-id="_*****__*****__*****_*"
         data-embed-option="popover"
         data-embed-display="thumbnail"
         data-domain="https://****.zoom.us"
        >
         <img
          src="https://onzoomcontent3.zoom.us/img/default_session_image.jpg"
          style="width:100%;"
         />
        </div>
        ```

    3. Text link popover mode

        ```html
        <div
         class="zoom-embed"
         style="width:100%;height:100%;"
         data-channel-id="_*****__*****_******"
         data-video-id="_*****__*****__*****_*"
         data-embed-option="popover"
         data-embed-display="text"
         data-domain="https://****.zoom.us"
        >
         popover text link
        </div>
        ```

## Dom Parameters ###

| Parameter | Description | Default    |
|:--------------|:--------------|:---------------|
| data-channel-id <span style={{color: 'red'}}> Required</span> | This is automatically generated when the code is generated. | - |
| data-video-id <span style={{color: 'red'}}> Required</span> | This is automatically generated when the code is generated. | - |
| data-embed-option <span style={{color: 'red'}}> Required</span> | `inline`&#124;`popover` Automatically generated according to settings. | - |
| data-embed-display <span style={{color: 'red'}}> Required</span> | `thumbnail`&#124;`text` Automatically generated according to settings. Defaults to thumbnail in inline mode. In popover mode, it will be generated according to the setting. `thumbnail`&#124;`text` | - |
| data-locale <span style={{color: 'red'}}> Optional</span> | Currently four multi-languages are supported `en-US` English , `de-DE` German, `fr-FR` French, `ja-JP` Japanese, English is used by default. | en-US |


Parameter	Description	Default
data-channel-id <span style={{color: 'red'}}> Required	This is automatically generated when the code is generated.	-
data-video-id <span style={{color: 'red'}}> Required	This is automatically generated when the code is generated.	-
data-embed-option <span style={{color: 'red'}}> Required	`inline`\|`popover` Automatically generated according to settings.	-
data-embed-display <span style={{color: 'red'}}> Required	`thumbnail`\|`text` Automatically generated according to settings. Defaults to thumbnail in inline mode. In popover mode, it will be generated according to the setting. `thumbnail`\|`text`	-
data-locale <span style={{color: 'red'}}> Optional	Currently four multi-languages are supported `en-US` English , `de-DE` German, `fr-FR` French, `ja-JP` Japanese, English is used by default.	en-US