Text With Video component

add text and video content

  • multiple video display settings
  • multiple text display settings

The Text With Video component is the main component to add videos with or without textual content to a page. It provides a variety of video and text display settings.  

on this page:
CMS settings , Opens In New Window Front-end examples , Opens In New Window
Step by step , Opens In New Window

Introduction

The Text With Video component is the main component to add textual content and/or single videos to a page. It is possible to set the video and text position and layout (left/right and sizes) and video effects and loop options.

Glossary:

Example:

 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

 

CMS settings

 

As the component is still in its early stage and will still undergo changes in the future, it can be found in the GEM Experimental Menu in the Sidekick.

tab: General

tab: Text

tab: Video Properties

Attention:

Sound for Videos

All videos for this component are automatically muted and there is no option to unmute them.

Front-end examples

Used as text only

Used as video only

2 components combined

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Example: Positioning & Layout

Video first (with layout 100%)

Text first (with layout 100%)

Video first (with layout 70% video, 30% text)

Text first (with layout 70% video, 30% text)

Video first (with layout 50% video, 50% text)

Text first (with layout 50% video, 50% text)

Video first (with layout 30% video, 70% text)

Text first (with layout 30% video, 70% text)

Example: Text alignment horizontal

Text Alignment Horizontal = Left

Text Alignment Horizontal = Center

Text Alignment Horizontal = Right

Example: Text alignment vertical

Text Alignment Vertical = Top

Text Alignment Vertical = Middle

Text Alignment Vertical = Bottom

Example: Play

Play = On Load

Play = On Visibility

Example: Loop Options

Loop Options = None

Loop Options = Loop

Loop Options = Replay

Example: Effect

Effect = None

Effect = Fade-In

Effect = Frame-By-Frame

Step by step

1

2

3

Related topics

Used recurring elements