Web Stories for WordPress

Inserting media

Media Library

You can add new images, videos, or GIFs to your stories using multiple ways:

  1. Clicking the Upload button
  2. Dragging media from your computer to the media gallery or Workspace area
  3. Copy + paste into the editor
  4. Clicking the Link button and pasting the URL to a media file on another website

Supported File Formats

The editor currently supports most common image & video formats. See also the the section on video file formats.

Third-party Media Providers

Click on the picture icon in the Element panel’s tabs to switch to third-party media sources, giving you access to millions of images & videos. Currently, the following integrations are available:

Note: Your use of stock content is subject to third party terms.

Add a background image or video

Add a background image or video by selecting an asset and dragging it into the background drop area. Drop targets are outlined in blue. You may alternatively click the "Set as background" option in the design panel after selecting an image.

Change the background size and placement by double clicking the image, use the slider to increase or decrease the size and drag it to your preferred position.

Click outside the image to exit background placement.

Masking & cropping

Mask and crop images by adding shapes from the Shapes tab in the Element panel to your Web Story page, then drag and drop the image into the shape’s drop target area. Drop targets are outlined in blue.

Tip: Media can also be "dropped" into other images. This is very useful if you’d like to keep an images’ position and size, but want to quickly replace the contents.

Change image cropping and placement by double-clicking the shape. Use the slider to increase or decrease the size and drag it to your preferred position.

Click outside the image to exit placement.

Managing Videos

Videos are highly engaging to readers and contribute to the immersiveness of stories. The Web Stories plugin offers several tools to edit and optimize videos, taking care of all the heavy lifting for you.

This includes:

For these features to be available, ensure that the Video Optimization setting at Settings → Video Optimization is turned on.

While this feature can be disabled at any time, we highly recommend keeping it enabled.

Note that this is only supported in the latest versions of the major browsers (Chrome, Safari, Edge, Firefox, Opera). For Safari, make sure you are using at least version 15.3+.

Video Settings

Once you have added a video to a story, it can be edited in the Video Settings panel in the Style tab of the Editor.

The following options are available:

Video Optimization

The Web Stories plugin can automatically optimize (compress) videos added to your stories. This works for videos that you upload directly to your story (for example via drag & drop), but also for ones that you add later through the WordPress Media Library.

If the Video Optimization setting is turned on, you may see this message when uploading a new video to the editor:

Video optimization happens on your computer and includes several steps to ensure your videos follow best practices:

Optimized videos improve the user experience due to faster loading, and take up less storage space on your site.

Note: To prevent data loss, stories cannot be saved during video optimization and upload.

Optimizing videos before upload

While we highly recommend enabling the Video Optimization feature, in some cases it might be easiest and fastest to optimize your videos before uploading them to your site and using them in Web Stories.

If you are already optimizing your videos before uploading them to WordPress, it makes sense to disable the feature to avoid having the Web Stories editor compress your already optimized videos.

We recommend checking out the video and images editorial guidelines to learn about best practices for manually optimizing videos for use in stories.

Supported video file formats

If the Video Optimization feature is enabled, the Web Stories editor will support a large variety of video file types, such as .webm, .mp4, .mov, .ogg. Videos of these file types will be converted to .mp4 during upload.

If the Video Optimization feature is disabled, only .webm and .mp4 videos are supported by default, as other types of videos are not supported by all browsers.

Adding background audio

The Web Stories editor supports two types of audio:

Adding captions

It is recommended to add captions to page-level background audio for improved user experience. Include captions by:

Note: Adding captions by linking to an external file requires Cross-Origin Resource Sharing (CORS) to be set up on the server where the file is hosted. Learn more about configuring CORS.