Experiencing an issue?

Embed Video Best Practices

Video content is a great tool that helps you engage with your audience. Getting video content to display properly on all devices requires a bit of tweaking. 

Generally speaking, default settings do a good job of displaying video content on desktop monitors. That's not always the case with mobile devices. Given the popularity of mobile devices and variety of screen sizes, we recommend taking a few minutes to customise video settings for mobile devices. 

This article shows you how to tweak display settings so that video content displays well on desktops and mobile devices.

For more information, see:

  

  

1  Problem

Here is an example of a display problem on a phone. There is too much black space above and below the video content. In this image, the width is set to 100% and the Minimum Height is set to 450 px.

 

mob-1.png

 

In another test, we adjusted the Minimum Height to 100 px. The result is a video display that is not as wide as the screen (shown by the black spaces on either side of the video).

mob-3.png

 

 

2  Best practice

2.1 Locating the display settings

Changing the Minimum Height of the video display can often fix display problems on mobile devices.

To change height settings:

  1. Drag the Video Component on to a page and add your video
  2. To insert the URL for a video, hover the mouse pointer over the Video Component. The toolbar bar displays.
  3. Click the Settings button in the top left corner. The Settings panel displays.

The Default Height controls the display of video on desktop computers. The Minimum Height sets the height on mobile devices.

mob-5a.png

 

2.2 Solution

We suggest setting the mobile display height at 50% of the Default Height. Test the display in the preview window and then make further tweaks as required.

In the image below, the Default Height is 550 px and the Minimum Height (for mobile devices) is 275 px. This is a preferred display setting because:

  • the video content displays fully across the width of the screen
  • there is just enough height to keep the logo and video player controls off the video content 

mob-6.png

 

2.3  Another problem and solution

Another video display problem on mobile devices is the header overlapping the content. This problem can often be fixed by adding a spacer.

For more information, see:

 

 

 

Related articles