Video Element

21/11/2019

The Video Element is brand new in Avada 6.1, and offers the ability for users to post self-hosted video clips easily to their Avada websites.

View Element Demo Page

How To Use The Video Element

The Video Element is easy to add anywhere in your content. Follow these simple steps below.

Step 1. Edit an existing page. Ensure the Fusion Builder is activated, by clicking the ‘Use Fusion Builder’ button on top of the page editor.

Step 2. Choose the Container and Column you wish to add the Alert Element into. Click on Add new Element.

Step 3. Choose Video from the Elements List.

Step 4. Add your video file in the first option, Video MP4 Upload. You can either select one already in the media library, or upload one. You can also upload a WebM file, but this is optional.

Step 5. Once you have added your video file, continue configuring the element with your preferred function and styling options.

Read below for a detailed description of all element options.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Video section.

General Tab

  • Video MP4 Upload – Upload or select your video file to be loaded into the player.

  • Video WebM Upload – Add your WebM video file. This is optional; only MP4 is required to render your video with cross-browser compatibility.

  • Video Max Width – Set the maximum width the video should take up. Enter value in pixel (px) or percentage (%), ex: 200px. Leave empty to use full video width. NOTE: Percentage values will be with respect to the original video width and not the wrapping container width.

  • Video Controls – Controls whether the video controls should show or not.

  • Video Preloading – Controls how / if the browser should preload the video. Choose “Metadata” if only the video metadata should be preloaded on page load or “Auto” to preload the full video on page load.

  • Loop – Turn on to loop the media when it is played.

  • Autoplay – Turn on to autoplay the media upon page load.

  • Mute Video – IMPORTANT: In some modern browsers, videos with sound won’t be auto-played, and thus, won’t show as the container background when not muted.

  • Preview Image – Upload an image to display as a video preview.

  • Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Fusion Builder Elements tab in the Theme Options.

  • CSS Class – Add a class to the wrapping HTML element.

  • CSS ID – Add an ID to the wrapping HTML element.

View The Options Screen

Design Tab

  • Overlay Color – Controls the overlay color of the video element.
  • Border Radius – Set the border radius of the element. In pixels.

  • Box Shadow – Set to Yes to enable a box shadow for the element.

  • Box Shadow Position – Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px.

  • Box Shadow Blur Radius – Set the blur radius of the box shadow. In pixels.

  • Box Shadow Spread Radius – Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.

  • Box Shadow Color – Set the color of the Box Shadow.

  • Alignment – Select the video’s alignment. Choose from Text Flow, Left, Center, & Right.

  • Margin – Set the top and bottom margin of the element (spacing above and below the video). Enter values including any valid CSS unit, ex: 4%

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Video

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Maximum Width – Set the maximum width of the video using a valid CSS value.

  • Video Controls – Controls whether the video controls should show or not.

  • Video Preloading – Controls how / if the browser should preload the video. Choose “Metadata” if only the video metadata should be preloaded on page load or “Auto” to preload the full video on page load.

View The Options Screen

Video Element Parameters

Copy to Clipboard
  • video – The source of the video file to load in the player.

  • video_webm – The source of the optional WebM video file.

  • width – Set the maximum width the video should take up. Enter value in pixel (px) or percentage (%), ex: 200px. Leave empty to use full video width. NOTE: Percentage values will be with respect to the original video width and not the wrapping container width.

  • controls – Sets whether video controls are shown. Options are yes or no.

  • preload – Options are no, auto or metadata. Controls how / if the browser should preload the video. Choose “Metadata” if only the video metadata should be preloaded on page load or “Auto” to preload the full video on page load.
  • loop – yes or no. Loops the video.

  • autoplay – yes or no. Autoplays the video on page load.

  • mute – Options are yes or no. IMPORTANT: In some modern browsers, videos with sound won’t be auto played, and thus won’t show as container background when not muted.

  • preview_image – Path to image to display as a video preview.

  • hide_on_mobile – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Fusion Builder Elements tab in the Theme Options. Options are small-visibility,medium-visibility,large-visibility.

  • class – Adds a class to the wrapping HTML element.

  • css_id – Adds an ID to the wrapping HTML element.

  • overlay_color – Controls the overlay color of the video element.

  • border_radius_top_left – Controls the radius of the top left border. In pixels.

  • border_radius_top_right – Controls the radius of the top right border. In pixels.

  • border_radius_bottom_left – Controls the radius of the bottom left border. In pixels.

  • border_radius_bottom_right – Controls the radius of the bottom right border. In pixels.

  • box_shadow – Enable a box shadow on the audio player. Accepts yes or no.

  • box_shadow_vertical – Set the vertical position of the box shadow. Positive values put the shadow below the box, negative values put it above the box. In pixels.

  • box_shadow_horizontal – Set the horizontal position of the box shadow. Positive values put the shadow to the right of the box, negative values put it to the left of the box. In pixels.

  • box_shadow_blur – Set the blur radius of the box shadow. In pixels.

  • box_shadow_spread – Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.

  • box_shadow_color – Set the color of the Box Shadow. Takes a hex value (#ffffff)

  • alignment – Select the video’s alignment. Options are left, right and center. Leave empty for text flow.

  • margin_top – Set the spacing above the video. Enter values including any valid CSS unit, ex: 4%.

  • margin_bottom – Set the spacing below the video. Enter values including any valid CSS unit, ex: 4%.