Navigating Video Element Settings

Video Element

The video element is used to display a video within your app. When you drag the video element into the preview screen, it will display a default grey screen until you link the video within the element settings.

Videos are displayed using the video element through the use of a URL to a video.

Video Element Settings:

Name

  • The name of your element. The name is simply used for your reference as the app builder, but it will not appear anywhere to app users.
  • To name your element, click the pencil icon in the top of the left menu, and type your new name for the element, and click save.

Video Link

  • The video link is how you select your video to show up in your app. An acceptable link is a URL copied directly from the website the video is on. 22apps supports a URL to an MP4 file, Youtube, Vimeo, or Wistia embed URL.
  • To input your video link, identify the input area below “Video Settings” in the left menu. Paste your video link directly into the input area.

Width

The width setting of a video element determines its size within your app.

  • Note – the original video’s dimensions will not be altered by the width setting.
  • To edit the width of your video, drag the slider underneath “Width” in the menu on the left side of the page.

Animation

  • Setting an animation for your element will cause it to load in with a visual effect. 
  • Once the main screen is loaded on a phone, the animation chosen will take place according to your trigger settings. Beneath “Trigger”, you will see a dropdown menu, and an input for for “Minutes” and “Seconds”.
  • To choose an animation for your element, click the drop-down menu below “Trigger" and select an animation.
  • The "Minutes" and Seconds" inputs are used as a timer. Once a screen is loaded on a phone, the timer starts ticking down. When the timer expires, your element's animation will occur.
  • Note - once the animation has started, it will continue on the same timer, no matter if the user leaves the screen or returns to it later.

Align

  • To align your video to the left, center, or right of the column it’s in, click the corresponding icons underneath “Align” in the “Appearance” menu on the right side of the page.

Border

  • The visual border around your video is determined by a number of factors:

Style

  • To set your border’s style, enter the drop-down menu beneath “Style” on the “Appearance” menu on the right side of the page. You can then select from a list of several border styles.
  • Note – to remove the border, set the border style to “None”.

Border Color

  • To set the color of your border, click the color box next to “Border Color”. Once satisfied, simply click anywhere else on the page to set the color.

Border Size

  • To set the thickness size of your border, enter the drop-down menu beneath “Border Size” on the “Appearance” menu on the right side of the page. You will see a list of several “Point” options. The higher the number is, the thicker the border will be.

Border Radius

  • The radius of your border is used to determine the roundedness of your element. To change your border’s radius, drag the slider under “Border Radius” on the “Appearance” menu on the right side of the page. The higher the number is, the more round your border’s edges will become.

Spacing

  • Spacing is used to generate space around content, inside of an element's area. To edit spacing settings, scroll to the bottom of the “Appearance” menu on the right side of the page to where it says "Spacing". You can edit the spacing of the Top, Bottom, Left, and Right of your element by dragging the sliders for each respectively. The higher the spacing is, the more space between the border of the element and the content.

If you have any questions about this article, feel free to reach out to our support team! We're happy to help.