- Reference Guide
- Miva Reference Guide
- PageBuilder
-
- Customers - Create a Customer Account
- Customers - Customers Batch List
- Customers - Customer Dashboard
- Customers - Customer Tax Exempt
- Customers - Shop as Customer
- Customers - Last Password Changed
- Customers - Customer Quick Add
- Customers - Business Accounts
- Customers - Customer Settings
- Customers - Availability Groups
-
- Creating a New Order
- Working with Orders
- Order and Order Item Statuses
- Processing Returns and Refunds
- Address Validation
- Recalculate Shipping
- Item Lookup
- Payment Transactions List
- Authorization Failures
- Unship Shipments/Split Shipped Shipments
- Add/Edit Subscriptions
- Batch Capture Progress Dialog
- Transactions
-
- Expanded Search Rules (Full Text Search)
- Copy Price Group
- Geographic Shipping Restrictions
- Exclusion Rule Caching
-
- Price Groups - Global Settings
- Price Groups - Qualifying/Discounting
- Price Groups - Structure/Priorities/Relationships
- Price Groups - Legacy
- Price Groups - Add-on Product
- Price Group - Basket Discount
- Price Group - Basket Discount (Specific Products)
- Price Groups - Buy X Get Y
- Price Groups - Markup from Cost
- Price Groups - Product Discount
- Price Groups - Customer Specific Pricing
- Price Groups - Specific Sale Price
- Price Groups - Shipping Discount (Entire Order)
- Price Groups - Shipping Discount (Discounted Products Only)
- Price Groups - Volume Pricing
- Price Groups - Using Coupons
- Price Groups - Via Template Code
- Marketing Settings
-
- Sort Order History by Status
-
- Page Builder - Upgrade Process
- Page Builder - General Overview
- Page Builder - Creating a New Page
- Page Builder - Page Settings
- Page Builder - Navigation Drop Down
- Page Builder - Mobile Tablet Desktop Preview
- Page Builder - Scheduling in Page Builder
- Page Builder - Pushing Your Page Live
- Page Builder - Template Branch Preview
- Page Builder - Components Overview
- Page Builder - Hero Banner Component
- Page Builder - Text Banner Component
- Page Builder - Image Across Component
- Page Builder - Text Area Component
- Page Builder - Image and Text Component
- Page Builder - Video Component
- Page Builder - Hero Slider Component
- Page Builder - Rich Text Editor Component
- Page Builder - Product Carousel Component
- Page Builder - Featured Product Component
- Page Builder - Category Carousel Component
- Page Builder - Quick Order Flex Component
- Page Builder - Header-Footer
- Page Builder - Component Text Settings
- Page Builder - Style Guide
- Copy Page
-
-
- Manage Quotes - Overview
- Manage Quotes - Installation
- Manage Quotes - Quote Page Templates
- Manage Quotes - Using Manage Quotes
- Manage Quotes - Quote Notes
- Manage Quotes - Working with Quotes
- Manage Quotes - Excluding Quotes from Price Groups
- Manage Quotes - Quote Expiration and Follow Up Emails
- Manage Quotes - Price Groups
- Manage Quotes - Quoted Shipping
- Miva Connect
- Miva Docs
- Reference Guide
- Miva 10 Page Builder Video Component
PageBuilder - Video Component
The Video component allows you to add a video to your page. It’s an excellent way to showcase dynamic content to grab a viewer’s attention.
On this Page
- Properties: Text Overlay
- Advanced: Spacing
- Advanced: Video Controls
- Advanced: Desktop
- Advanced: Mobile
Component Name: The name of the component. The default value is Video but it can be edited as needed.
Video URL: This is where you enter the link to the video you wish to display. Videos can be from YouTube, Vimeo or any other externally hosted site.
Important
You cannot upload a video to the Miva admin to use in the video component. The video must be uploaded elsewhere.
Display Size: This sets the size of the video display. There are seven options: Small, Medium, Large, 16/9, 4/3, 3/2 or Specific Width and Height. Any specific width and height will be set in the Advanced: Video Controls tab below.
Display Size: In the example above, from top to bottom, the video display size is Small, Medium and Large.
Properties: Text Overlay
To add a Text Overlay to the video, click the slider to enable it. Once it is enabled, the configuration options open below. Using a Text Overlay is strictly optional, and it is off by default.
Content Placement: This determines where the content of the overlay will be placed. The options are Left, Center or Right.
Text Alignment: This aligns the text within the overlay. The options are Left, Center or Right.
Content Placement/Text Alignment: In the example above, the content is placed left, and the text is also aligned left.
Note
For the rest of the configuration options for elements like Heading Text, Subheading Text, Body Text and Button Text, please visit the Text Settings document, here.
Advanced: Spacing
The Spacing section of the Advanced tab allows you to alter the spacing, or padding, on the top and the bottom of the component. This establishes the space between this component and the page elements adjacent to it. It is set in pixels.
Advanced: Video Controls
The Video Controls section of the Advanced tab is where you configure several aspects of how the video is displayed.
Start At: This sets where the video will start. It is set in seconds. If you want your video to start from the beginning, for example, you would set the value to 0.
Autoplay: If checked, the video will automatically play whenever someone visits the page. If this box is unchecked, a play button will be displayed over the video, giving the visitor the ability to start the video as desired.
Play on Loop: If checked, the video will play endlessly when someone is on the page. If unchecked, the video will play one time through and then stop.
Muted?: If clicked, any audio that accompanies the video will be muted by default. If not checked, the audio will play.
Show Player Controls: If clicked, the native video controls will display along with the video, allowing visitors to play, pause, and watch the video in full screen, among other things.
Video Width: If you set Display Size, in the Properties tab, to Specific Width and Height, this is where you enter the specific Video Width you want. It is expressed in pixels.
Video Height: If you set Display Size, in the Properties tab, to Specific Width and Height, this is where you enter the specific Video Height you want. It is expressed in pixels.
Advanced: Desktop
The Desktop section of the Advanced tab allows you to change additional aspects of the look of the Video component.
Text Background Color: If clicked, this enables the text background color function, allowing you to put a custom color background behind the text element shown over the video.
Color: The options are the same as noted above in the Heading Text section, except you are setting the color of the background, not the font.
Text Background Color: In the example above, we have created a text box with a grey background. A color background can be important. Due to the nature of videos, the background imagery may be constantly changing, which can make text difficult to read in spots. With a color background, you ensure the text is readable all the time.
Image Shader Overlay: This allows you to shade the video, which can bring attention to text elements. You can enter the amount of shade you want, as a percentage, or you can use the slider.
Advanced: Mobile
The Mobile section of the Advanced tab allows you to set additional aspects for how the Video component looks and behaves on mobile devices.
Text Background Color: If clicked, this enables the text background color function if viewed on mobile devices, allowing you to put a custom color background behind the text element shown over the video.
Color: The options are the same as noted above in the Heading Text section, except you are setting the color of the background, not the font.
Text Background Color: In the example above, we have created a text box with the same grey background as the desktop version. As you can see, the text box does not superimpose itself on the video while on mobile, so it may not be as important as on desktop, but can still be used to draw viewers to the text.
Content Theme: The Content Theme setting allows you to quickly change the text and button colors when they are used over light or dark backgrounds. Rather than needing to go into each text element and individually changing them due to the background, you can change the theme of all of the elements quickly in one spot.
The Content Theme settings are:
- Light: This is the default color scheme. It's good for use over light/white backgrounds.
- Dark (Always): This is good for use over dark backgrounds and images and applies a color scheme to the text and button elements that is more suitable for dark backgrounds. The (Always) indicator means it applies to all screen sizes; mobile, tablet and desktop.
- Dark (Desktop Only): This is good for use over a dark image, or if you have a dark background for desktop devices, but are using the default light or white colors on mobile and tablet devices. Like the Dark (Always) selection, it applies a color scheme to the text and button elements that is more suitable for dark backgrounds.
- Inverted: This selection should be used carefully, because it inverts the hues of all the colors of the elements inside a content area. For example, if an element is normally white, it will now be black. If it was red, it would be cyan, etc. This works well for monochromatic color schemes over dark backgrounds, but may not be great for colorful themes.