Video

Description of content types in the menus
Tool Bar Icon Description

HTML iframe element

Editable: No, you must use the Trait Manager Settings.

Droppable: No, you can't drop other blocks or components inside.

Component Tool Bar:

Parent Selectable: Yes, you can select parent element from component.

Draggable: Yes, you can drag this component to other locations in the canvas.

Copyable: Yes, you can copy component in the canvas.

Removable: Yes, you can delete this component from the canvas.

Trait Manager Settings: Yes

Provider: Sets vendor for iframe video embed. The default vendor is YouTube, though Vimeo, MyVRSpot, and Custom Iframe are also available.

Different providers have different settings:

YouTube

  • Video ID: Sets the video id for the iframe url. Default is "mxD7QEt85ms".
  • Video Width: Used in conjunction with Video Height to set responsive video ratio. Default is 560.
  • Video Height: Used in conjunction with Video Width to set responsive video ratio. Default is 315.
  • Autoplay: Sets the video to autoplay for an end-user once the page loads. Default is unchecked. Note: Video will not autoplay in the editor.
  • Loop: Sets the video to infinitely loop for an end-user. Default is unchecked.
  • Controls: Sets the video controls to show for the end-user. Default is checked.
  • Related: Sets the video to show other related videos when the video is finished playing. Default is checked.
  • ModestBranding: Sets the video to display limited YouTube branding. Default is unchecked.

Vimeo

  • Video ID: Sets the video id for the iframe url. Default is N/A.
  • Video Width: Used in conjunction with Video Height to set responsive video ratio. Default is 560.
  • Video Height: Used in conjunction with Video Width to set responsive video ratio. Default is 315.
  • Autoplay: Sets the video to autoplay for an end-user once the page loads. Default is unchecked. Note: Video will not autoplay in the editor.
  • Loop: Sets the video to infinitely loop for an end-user. Default is unchecked.
  • Portrait: Sets the video to show the authors Vimeo avatar. Default is checked.
  • Title: Sets the video to display the video title. Default is checked.
  • Byline: Sets the video to display the author of the video. Default is checked.
  • Color: Sets the video accent color.  Default is Vimeo blue.

MyVRSpot

  • Video ID: Sets the video id for the iframe url. Default is N/A.
  • Video Width: Used in conjunction with Video Height to set responsive video ratio. Default is 560.
  • Video Height: Used in conjunction with Video Width to set responsive video ratio. Default is 315.

Custom Iframe

  • Iframe Src Url: Sets the src for the iframe. Default is N/A.
  • Video Width: Used in conjunction with Video Height to set responsive video ratio. Default is 560.
  • Video Height: Used in conjunction with Video Width to set responsive video ratio. Default is 315.

Default Styles (doesn't include default browser styles): No

Child Components: No

Unique Documentation: Yes

The video component always assumes the full width of its parent element. It's fully responsive and scales with the parent container with the ratio set via Video Width and Video Height settings.

Stylable: Yes, when double-clicked, some options are available via inline rich-text editor. These Style Manager options are available:

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

Back to Story Builder

Back to Page Builder