Inserting media
Media Library
You can add new images, videos, or GIFs to your stories using multiple ways:
- Clicking the Upload button
- Dragging media from your computer to the media gallery or Workspace area
- Copy + paste into the editor
- 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:
- Optimizing (compressing) videos
- Converting animated GIFs to videos
- Trimming videos
- Muting videos
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:
- Loop
When selected, the selected video will restart when finished playing for as long as a user is on the slide with the video - Trim
The Trim tool allows you to trim the video to be shorter. When a video is trimmed, the original video will remain in your media library and a new file for the trimmed version will be added. - Remove audio
This will mute your video by removing the audio track from your uploaded video. The original video will remain in your Media Library and a new version without an audio track will be added to the Library.
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:
- Resizing the video if needed so that it does not exceed dimensions of 720x1280px
- Compressing the video to reduce file size
- Transcoding the file to the MP4 (H.264) format to ensure wide browser compatibility
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:
- Page-Level Background Audio
Plays on a single page, either only once or in a loop. Supports captions. Ideal for voiceovers / narration. - Story-Level Background Audio
Plays across the whole story, even when there is additionale page-level background audio. Ideal for background music.
Adding captions
It is recommended to add captions to page-level background audio for improved user experience. Include captions by:
- Formatting caption text in the required WebVTT file
- Click on the page on the canvas
- Open the "Page Background Audio" panel in the Style tab
- Click the "Upload captions" button and select the WebVTT file from the WordPress Media Library, or insert an external file by pasting its URL
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.