Content ElementsVideo

Video

Sana Commerce 9.3
Your connector

Select all
Back Next

Add Video Content Element

The "Video" content element can be added to the web pages (flexi-pages, product and product list pages) and system pages of the Sana web store. For example, you can add the "Video" content element to the home page of your web store and play your company showreel or a product demo video in a visually striking manner.

The tables below provide description of the "Video" content element settings.

Video size settings

Field Description
Size There are several variants for how a video can be displayed on a page:
  • Fixed-width fixed-height - You can set the height of a video. The width of a video is fixed and it complies with the page content.
  • Full-width fixed-height - You can set the height of a video. The width of a video is fixed and it is adjusted to the width of a page.
  • Full-screen - a video is shown as a background of a page. Height and width are fixed and cannot be changed.

     The presentation of the video in the "Full-screen" mode on the product, product list and system pages is similar to how it is shown in the "Full-width fixed-height" mode.

    You should use only one "Video" content element in the "Full-screen" mode on the page.

    If you add other content elements along with the "Video" content element in the "Full-screen" mode, the "Video" content element should be the first one on the page.

    You should use only one content element in the "Full-screen" mode on the page, for example, either the "Image Slider" content element or the "Video" content element.
Height If you use the Fixed-width fixed-height option or the Full-width fixed-height option, you can also set the height of a video for the desktop or tablet. The width of a video is fixed (set by design) and you cannot change it.

Default height for the desktop is 560px.
Default height for the tablet is 430px.

If you change the height of the video and add any elements to it, for example text and button we recommend to check how the video is shown on the page. For example, if you make the video smaller, you should also consider the length of the text you are adding, since too long text may not look good on the video.

See the example of "Video" content element in different sizes in the web store.

Fixed-width fixed-height

Full-width fixed-height

Full-screen

Embed video

Field Description
Video URL In this field enter a video URL to add a video to a web page. You can add videos from video sharing services, like YouTube or Vimeo.

        The "Video" content element supports only the MP4 video format for externally hosted videos.

 

Video player control settings

Field Description
Show video controls Use this option to show or hide video controls, like volume, seek bar, play button, fullscreen toggle button, etc.

    This option is disabled by default, if the Full-width fixed-height or Full-screen option is selected.
Autoplay Use this option to enable and disable the autoplay of a video. When this option is enabled, a video plays automatically once a customer opens a page.

    A video will play without sound, if the "Autoplay" option is enabled.

    This option is enabled by default, if the Full-width fixed-height or Full-screen option is selected.
Loop Use this option to replay a video once it reaches the end. A video will loop continuously.
Mute Use this option to play a video without sound.

 

Text settings

Field Description
Header text Add a text which will be shown on a video. You can apply styles to the header text using the HTML tags. Using the Text position field, you can define the position of a header text on a video.

    We recommend to add the header text which does not exceed two lines to be nicely shown on the video.
    The maximum allowed length of a header text is 140 characters.
Header text color Specify the header text color. The default color is white.
Subheader text Add a subheader text which will be shown on a video under the header text. You can apply styles to the subheader text using the HTML tags. Using the Text position field, you can define the position of a subheader text on a video.

    We recommend to add the subheader text which does not exceed two lines to be nicely shown on the video.
    The maximum allowed length of a subheader text is 160 characters.
Subheader text color Specify the subheader text color. The default color is white.
Navigation button Add an internal web store page or an external URL to the button. Clicking on the button will open the linked page.

If the option None is selected, than a button will not be shown on the video.
Button text Add a text which will be shown on a button. The button is shown under the subheader text. Using the Text position field, you can define the position of a button on a video.

    We recommend adding the text which does not exceed one line on the button to be nicely shown.
    The maximum allowed length of a button text is 32 characters.
    If you leave this field empty, then the default text "Learn More" will be shown on the button.
Button text color Specify the button text color. The default color is white.
Text position Use this field to define the position of the header text, subheader text and the button on a video. The available options are: right, left and center.

You can also set the position of the header and subheader texts using the Align option in the text editor, in this case the value you set in the Text Position field will be overridden.
The position of the button can be defined only using the Text Position field.

 

Miscellaneous settings

Field Description
Inverted logo If you set a video as a background of the page, using the option "Full-screen", and the logo on the video is of the dark color, you can add a light-colored web store logo, which will be used instead of the default one, on top of the video.

We recommend to check if the size of the logo is optimal and if logo looks good on the video.
Video thumbnail Select the cover image for a video. The video thumbnail is shown while video is downloading.

    The video thumbnail is not shown on the video, if the Fixed width fixed height option is selected in the Video size settings, instead the default video cover image will be shown.

    The following image extensions are supported: JPG, JPEG, PNG.

Below see how the "Video" content element works on desktop computers, mobile and tablet devices.

Video size Desktop Mobile Tablet
Fixed-width fixed-height
  • The default video thumbnail is shown
  • The header text and subheader text are shown
  • Custom thumbnail is not shown
  • The default video thumbnail is shown
  • The header text, subheader text and custom thumbnail are not shown
  • Video will not autoplay
  • Video controls will be enabled by default
  • Video pops up in a new window on iPhones (works only if you add a video from YouTube)
  • The default video thumbnail is shown
  • The header text, subheader text and custom thumbnail are not shown
Full-width fixed-height
  • The header text and subheader text are shown
  • Video will play only in the landscape mode
  • The header text, subheader text and custom thumbnail are shown in both portrait and landscape modes
  • Video pops up in a new window on iPhones (works only if you add a video from YouTube)
  • Video controls will be shown on Android devices, if a video was added using the file storage service, like Google Drive, OneDrive etc.
  • The header text and subheader text are shown in both portrait and landscape modes
Full-screen    
  • The presentation of the video in the "Full-screen" mode on the product, product list and system pages is similar to how it is shown in the "Full-width fixed-height" mode
  • The presentation of the video in the "Full-screen" mode on the product, product list and system pages is similar to how it is shown in the "Full-width fixed-height" mode
  • Video will play only in landscape mode
  • The header text, subheader text and custom thumbnail are shown in both portrait and landscape modes
  • Video pops up in a new window on iPhones (works only if you add a video from YouTube)
  • The presentation of the video in the "Full-screen" mode on the product, product list and system pages is similar to how it is shown in the "Full-width fixed-height" mode
Back Next
Content ElementsVideo

Sitemap

Installation

Product Versions

Links

Sana Commerce does not accept any liability for the content of this website, or for the consequences of any actions taken on the basis of the information provided. The information below should be interpreted as an example. No rights can be derived from this information.

Sana Commerce – the integrated e-Commerce solution for Microsoft Dynamics and SAP
© 2021 Sana Commerce. All rights reserved
Updated: January 2021