Create a Support TicketContact Support

Video

Video

Video elements in ResponsiveAds let you embed rich motion content in your creatives, supporting features like autoplay, loop, mute, and responsive behavior. You can use different video configurations for each size or breakpoint in your ad to ensure optimal playback across devices.

Adding and Configuring a Video

  1. Add a Video Element

    • Click “+ Add Element” and choose Video from the list.

    • The video will appear on the canvas and in the element list.

  2. Upload or Select a Video

    • Open the Setup tab for the video element.

    • Upload a new MP4 file or select one from your existing library.

    • You can also enter a direct video URL.

  3. Set Playback Behavior

    • Options include:

      • Autoplay

      • Mute (required for autoplay on most browsers)

      • Loop

      • Show Controls

      • Click to Play

  4. Responsive Behavior

    • Videos can be turned on or off for different breakpoints.

    • Layout, size, and visibility are managed like any other element and can be customized per size.

Video Renditions

When a video is uploaded, ResponsiveAds automatically generates several renditions — alternate versions of the video at different resolutions and file sizes. You can choose which renditions to use for better performance and broader compatibility.

What Are Renditions?

A rendition is a compressed version of the original video file, optimized for different screen sizes, connection speeds, or browser requirements.

Why Use Renditions?

  • Autoplay Compatibility: Browsers like Chrome may block autoplay for videos larger than ~3.3MB.

  • Performance: Smaller renditions load faster, improving the user experience.

  • Fallback Support: Multiple renditions increase the likelihood that at least one video can autoplay successfully.

How to Manage Renditions

  1. Select a video element and open the Setup tab.

  2. Click into the Video Renditions panel.

  3. You will see a list of automatically generated renditions, including:

    • Resolution (e.g., 1200×700)

    • File size

    • A status indicator (e.g., red if autoplay is not supported)

  4. Enable or disable renditions based on your requirements:

    • Enable lighter versions (under 3MB) for autoplay support.

    • Disable heavier ones unless needed for specific use cases (like high-resolution desktop).

Tip: You don’t need to manually compress your video before uploading. ResponsiveAds handles rendition generation automatically.

Best Practices for Video Elements

Goal
Recommendation

Ensure autoplay

Enable at least one rendition under 3.3MB.

Support all sizes

Add different videos or enable/disable visibility for breakpoints.

Improve load times

Use the smallest effective rendition.

Mobile optimization

Favor vertical formats (e.g., 9:16) and low file sizes.

Desktop optimization

Use landscape formats (e.g., 16:9) and allow slightly larger renditions.

Avoid video blocking

Always set videos to muted when using autoplay.

Notes on Export Formats

  • Stripped/Lightweight HTML5 exports may not support video playback. Read more

  • Always preview your creative using the Preview tab to ensure your selected renditions behave as expected across breakpoints.

Video Optimization for Ads

Videos are a powerful way to enhance your ads, but they need to be optimized for both performance and compliance. Chrome flags any creative that exceeds the “heavy ad” threshold (4 MB in 30 seconds), so ResponsiveAds recommends preparing all video assets carefully before uploading.

This guide covers the recommended specs and a step-by-step workflow using Adobe Media Encoder to create 15- and 30-second videos at 960×540 under 3.5 MB—optimized for use in ResponsiveAds.

Recommended Specs

  • Source file: 1920×1080 uncompressed MOV (master)

  • Target size: ≤ 3.3 MB (safe margin below Chrome’s 4 MB limit)

  • Duration: 15s or 30s

  • Resolution: 960×540

  • Frame rate: Match source

  • Format: H.264 (MP4)

Step-by-Step Workflow (Adobe Media Encoder)

  1. Start with an HD source file

    • Use a 1920×1080 uncompressed MOV master file.

    • Open the file in Adobe After Effects.

  2. Resize in After Effects

    • Create a new composition at 960×540.

    • Resize the 1920×1080 video to fit within that space.

    • Keep the same frame rate as your source.

  3. Export with Adobe Media Encoder

    • Format: H.264 (MP4)

    • Preset: Match Source – High Bitrate, then customize as follows:

    Video Settings

    • Resolution: 960×540

    • Frame Rate: Match source

    • Field Order: Progressive

    • Aspect: Square Pixels (1.0)

    • Profile: High

    • Level: 3.1

    • Bitrate Encoding: VBR, 2-pass

    • Target Bitrate: 0.7 Mbps

    • Max Bitrate: 1.0 Mbps

    • Render at Maximum Depth: ON

    • Use Maximum Render Quality: ON

    Audio Settings

    • Codec: AAC

    • Sample Rate: 44.1 kHz

    • Channels: Stereo (or Mono if dialogue only)

    • Bitrate: 96–128 kbps (128 kbps if music-heavy, 96 kbps if just voice)

    Multiplexer

    • Format: MP4

    • Standard settings

Bitrate and File Size Guide

To stay under 3.3 MB for a 30-second video:

  • Target file size: 3.3 MB = 26.4 Mb

  • Duration: 30 seconds

  • Target bitrate: ≈ 0.88 Mbps total

    • Video: ~700 kbps

    • Audio: ~128 kbps

Tips for Best Quality

  • VBR 2-pass is crucial: first pass analyzes, second pass allocates bits more intelligently.

  • Max Render Quality reduces scaling artifacts when resizing.

  • Static/talking head videos: lower Max Bitrate to 0.8 Mbps, allocate more to audio.

  • Motion-heavy videos: keep video at 0.7–0.75 Mbps, trim audio to 96 kbps.

  • Keyframe distance: set GOP ≈ 60 for 30 fps (≤2× frame rate) for smoother playback.

Output Expectation

  • File size: ~3.2–3.4 MB (depending on complexity)

  • Quality: optimized for sharp playback at 960×540

  • Compliance: safely under Chrome’s 4 MB / 30s “heavy ad” threshold

Pro tip: Add this workflow to your production checklist when preparing any ad creative that includes video.

Last updated

Was this helpful?