wiz-video

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.

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Usage

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.

To ensure the Veeva Vault assets upload with the wiz-video component in eWizard Editor, declare the video component type in the index.vue and ewizard.config.js files of the component.

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>

  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 following properties are available:

Property	Type	Default value	Description
autoplay	boolean	false	Starts the video playback when opening the site.
componentName	string	Video	The text label displayed in eWizard Editor.
fullScreen	boolean	false	Opens the video in full screen mode when you start the video playback.
loop	boolean	false	Loops the video playback.
muted	boolean	true	When true, the video starts muted.
playingDuration	number	0	The video playback duration in seconds.
playsinline	boolean	true	Plays the video inline within the playback area.
poster	string	./node_modules/wiz-video/node_modules/ wiz-video/media/ images/poster.pn	Path to the poster thumbnail image that appears on the video.
showPoster	string	true	The poster image visibility on the video.
src	string	N/A	The path or link to the video file.