wiz-video component in sites | Viseven Help Center

The wiz-video component is an iframe container for adding a video file of the supported format to the landing page layout. For more information, see Video.

Installation

To install the wiz-video component, run the following command in the root directory of your site project:

wiz install @site/wiz-video

For more information, see Install components.

Usage

TIP: As best practice, use eWizard Editor to add and edit the components.

To add the wiz-video component to the landing page template:

1) Add the <wiz-video></wiz-video> tag to the template in the ./App.vue file.

<!-- ./App.vue --><template>
<wiz-root style="background: #ffffff; width: 880px" class="editable-block">
<wiz-video
id="wiz-video-11c7"
src="./common/media/videos/682d1750-38be-11ec-a033-2ab36596d197.mp4"
data-asset-id="2stwx82nw3"
:autoplay="true"
:full-screen="true"
:controls="true"
:loop="true"
:playing-duration="15"
:show-poster="true"
poster="./common/media/images/poster.png"
component-name="My video"
></wiz-video>
</wiz-root>
</template>

The id attribute is required for the correct display of the component styles in eWizard Editor.

The data-asset-id attribute is required for the Veeva Vault modules in the assets.json file. For more information, see Veeva Vault publish settings.

2) Add the path to the video as the src attribute value. For example:

<!-- ./App.vue --><wiz-video src=".common/media/videos/my-video.mp4"></wiz-video>

When you download the landing page project from eWizard, the video file name is different from this file name in My library. For example, when you upload the my-video.mp4 file to My library in eWizard, the asset name becomes 682d1750-38be-11ec-a033-2ab36596d197.mp4 after downloading the project. You can rename the video file locally. eWizard keeps this file name when you upload your landing page back to My library.

Attributes

You can change the wiz-video component appearance and behavior using the following attributes within the <wiz-video></wiz-video> tag:

• component-name

Change the video component name:

<wiz-video component-name="My video"></wiz-video>

NOTE: This attribute doesn't change the video file name. It affects the component name on the Properties tab in eWizard Editor.

• controls

To show controls in the video, change the value to true:

<wiz-video :controls="true"></wiz-video>

• autoplay

To play the video on the landing page opening, change the attribute value to true:

<wiz-video :autoplay="true"></wiz-video>

• full-screen

To open the video in full screen mode when you start the playback, change the attribute value to true:

<wiz-video :full-screen="true"></wiz-video>

• loop

To loop the video playback, change the attribute value to true:

<wiz-video :loop="true"></wiz-video>

• muted

To play the video with sound when you start the playback, change the attribute value to false. By default, the video playback starts muted:

<wiz-video :muted="false"></wiz-video>

• playsinline

To play the video inline within the playback area, change the attribute value to true. You can still open the video in full screen mode using controls:

<wiz-video :playsinline="true"></wiz-video>

• playing-duration

To set the playing duration of the video, define the time in seconds as the attribute value:

<wiz-video :playing-duration="35"></wiz-video>

• poster

Add the path to the poster image that appears in your video:

<wiz-video poster="./common/media/images/poster.png"></wiz-video>

• show-poster

To display the poster image in the video, change the value to true:

<wiz-video :show-poster="true"></wiz-video>

Properties

The wiz-video component has the following properties:

Property	Type	Default	Description
`componentName`	String	`Video`	The text of the component name on the Properties tab in eWizard Editor.
`src`	String	N/A	The path or link to the video file.
`controls`	Boolean	`true`	Show the video controls.
`autoplay`	Boolean	`false`	Start the video playback on the landing page opening.
`fullScreen`	Boolean	`false`	Open the video in full screen mode when you start the video playback.
`loop`	Boolean	`false`	Loop the video playback.
`muted`	Boolean	`true`	Mute the video when you start the playback.
`playsinline`	Boolean	`true`	Play the video inline within the playback area.
`playingDuration`	Number	`0`	Set the playback duration in seconds.
`poster`	String	`./node_modules/wiz-video/node_modules/` `wiz-video/media/` `images/poster.png`	Path to the poster image (thumbnail) that appears in the video.
`showPoster`	Boolean	`true`	Show the poster image in the video.

For more information, see Component properties.