Skip to content
CMS Max Documentation

Video FAQ

Answers to common questions about using videos on your CMS Max website, including backgrounds, YouTube embeds, and autoplay

How do I update a background video on a page?

For best results, compress your video before uploading:

  1. Download HandBrake (free, available for Mac and Windows).
  2. Open your video in HandBrake and apply the Fast 1080p30 preset.
  3. Aim for a file size of 8–15MB.
  4. Export and upload the compressed file through the CMS Max media library.
  5. Insert the video into your content using the editor.

For mobile devices to autoplay a background video, the video must be muted, set to loop, and include the playsinline attribute. Use the source editor in the content editor to add these attributes if needed.

Tip: 16:9 is the best aspect ratio for background videos. If your page has text overlaid on the video, you may need to adjust for different screen sizes.

How do I embed a YouTube video?

To embed a YouTube video that resizes with the page:

  1. In the content editor, click the YouTube icon in the toolbar.
  2. Paste your YouTube video URL.
  3. The editor automatically generates the embed.

The embed uses a 16:9 aspect ratio and scales responsively on all screen sizes.

To set a fixed maximum width (for example, 400px centered):

  1. Use the source editor and wrap the embed in a container with style="max-width: 400px; margin: 0 auto;".

How do I embed a YouTube Short?

  1. Open the YouTube Short you want to embed.
  2. Click the Share icon.
  3. Copy the share link — it should contain /shorts/ in the URL.
  4. In the content editor, click the YouTube icon in the toolbar.
  5. Paste the Shorts URL. The editor generates the correct embed automatically.

Important: Make sure the URL contains "shorts" in it. Using the standard watch URL for a Short will not embed correctly.

When embedding a YouTube video using the source editor, add ?rel=0 to the end of the video URL in the embed code. For example:

https://www.youtube.com/embed/VIDEO_ID?rel=0

This disables the related videos panel that appears after playback ends.

How do I make a video autoplay?

For videos hosted on CMS Max (not YouTube), the video must have these attributes set:

  • autoplay — Starts playing automatically
  • muted — Required for autoplay to work in modern browsers (browser security policy)
  • playsinline — Prevents the video from going fullscreen automatically on mobile (iOS Safari)
  • loop (optional) — Restarts the video when it ends

Use the source editor in the content editor to add these attributes to your <video> tag.

Best practices for autoplay videos:

  • Keep file size below 5MB for fast loading
  • Use both MP4 and WebM formats for broad browser compatibility
  • Include a poster image for visitors on slow connections
  • Add captions for accessibility

How do I create a video popup?

To show a video in a popup when a visitor clicks a thumbnail or button:

  1. Switch to the source editor in the content editor.
  2. Add a trigger element (an image or button) that opens the modal when clicked.
  3. Add the modal container (which holds the video) at the bottom of your content.
  4. Use a 16:9 ratio container for the video embed to keep it responsive.

This approach works with both hosted videos and YouTube/Vimeo embeds.

What video sizes work best for mobile?

16:9 is the standard aspect ratio and works well on most screens. However, if you have a background video with text overlay, you may want to consider a vertical (9:16) version for mobile users to ensure the composition looks right on smaller screens.

For background videos specifically, you can provide two video files — one for desktop and one for mobile — and use layout classes to show the appropriate one on each screen size.