# Video + Text

<figure><img src="https://1694021061-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuVFZPn6NWEBzyt3Pl8h6%2Fuploads%2FRRVotxaVFonZR4fYlPQU%2Fimage.png?alt=media&#x26;token=7bf35b0d-54ad-4d99-abd3-9d8fe2cd04d2" alt=""><figcaption></figcaption></figure>

## What is a Video + Text page?

The Video + Text page accommodates a .mp4 video with related text.

## Quick steps: how to create & edit a Video + Text page

1. **Open Authoring.** Create or open a [Learning Story](https://everyday-digital.gitbook.io/authoring-docs/authoring/content-types/learning-story), [Assessment](https://everyday-digital.gitbook.io/authoring-docs/authoring/content-types/assessment) or [Survey](https://everyday-digital.gitbook.io/authoring-docs/authoring/content-types/survey) [content type](https://everyday-digital.gitbook.io/authoring-docs/authoring/content-types).
2. **Open the Editor.**
3. **Add a Video + Text page.** Select the + icon and choose Video + Text from the Add Page options. Alternatively, open an existing Video + Text page.
4. **Edit the page.** Select the page to view the [Page Options](https://everyday-digital.gitbook.io/authoring-docs/story-and-page-settings#what-are-the-page-options), and select Update to add and edit content. Videos must be in .mp4 format at a 16:9 ratio. Use the text space to enter the text that will display below the video.
5. **Format text layout and style.** Use the toolbar for basic text [formatting](#text-formatting-tools), and toggle to [Advanced Settings](#video-+-text-advanced-settings) for further layout options.

## Video + Text Advanced Settings

**Video Controls**\
Controls show options for the user to play, pause, toggle to full screen,  or adjust sound. By default, video controls are not added.

**Video Fill**\
Choose how the video should fill the page. Choose from: Fill Width/Height (Default), Fill Width, Contain Width, or Contain Height.

**Autoplay Video**\
By default, videos autoplay as soon as the user opens the page. If you do not choose to autoplay, a play button will be added.

**When the video ends...**\
Decide what happens at the end of the video: Play again (default), Stop, Go to next page.

**Loop Keyframe (In Seconds)**\
Use this option if you want your video to loop after a certain point - the video will play in full the first time and can then play again at a specific point based on the delay indicated in seconds. For example, if you only want to play intro effects once, you can use keyframe settings to loop only the part of the video that does not contain the intro.

**Background Colour**\
Select an alternative background colour to override the theme default.

**Video Size**\
Large (default), Medium, Small

**Video Effect (Non-Mobile)**\
Choose a video effect for the desktop/tablet version of your story. Effects include adding a white frame and/or a dark shadow.

**Video Tilt (Non-Mobile)**\
Tilt your video left or right.

## Video + Text Tips and FAQs

### What format and size should the video be?

**Videos must be in .mp4 format at a 16:9 ratio.**&#x20;

**Limit videos to 10MB.** It is recommended to keep video size below 10MB to avoid exceeding the story size limit of 100MB.&#x20;

### Why are my videos cut off, clipped, or showing empty spaces?

**Depending on the screen size, the page setting "Fill Width & Height" will fill the view until both width and height are filled.** This could, however, clip the video; this setting is intended for aesthetic/safe margin videos.&#x20;

If the video must be shown without any clip, set the fill to "Fill Width". Black bars might occur depending on the device size, which avoids the video being distorted.&#x20;

{% hint style="success" %}
**Suggested workaround:**&#x20;

1. Use a [Video Cover](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/video-cover) page and select "No autoplay" in the settings.
2. To include text relating to the video, use the "[Add Dialog](https://everyday-digital.gitbook.io/authoring-docs/story-and-page-settings/page-options#page-dialog)" option. After the user sees the dialog, the click-to-play option to watch the video will display.
   {% endhint %}

### How many videos can I add to a story?

**In stories, use videos sparingly to avoid lagging.** Use Streams if your content is video-rich.

### How do I stop my video from looping?

The video will run on a continuous loop unless you enable Video Controls (pause/play and full-screen options) in [Advanced Settings](#video-+-text-advanced-settings).

### How to format a Video + Text page

**Text formatting.** Refer to text formatting toolbar options in the [Text page](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/text).

**Image formatting.** Refer to the [Advanced Settings](#video-+-text-advanced-settings).

{% hint style="warning" %}
If you choose custom colours for your text, those colours will also be used in Dark Mode. Only default font colours will auto-adjust in Dark Mode.
{% endhint %}

### **Video display / orientation: Vertical Videos**

**Videos uploaded will display based on the orientation of the video i.e. Vertical / Horizontal.** This means vertical videos will display the full screen height giving the best experience on mobile.
