# 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).

{% hint style="info" %}
 Tip: You don’t need to manually compress your video before uploading. ResponsiveAds handles rendition generation automatically.
{% endhint %}

#### 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.                      |

{% hint style="warning" %}

#### Notes on Export Formats

* **Stripped/Lightweight HTML5 exports** may not support video playback. [Read more](/deploying-ads/html5-export.md)
* Always preview your creative using the **Preview tab** to ensure your selected renditions behave as expected across breakpoints.
  {% endhint %}

***

## 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

***

{% hint style="success" %}
**Pro tip:** Add this workflow to your production checklist when preparing any ad creative that includes video.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.responsiveads.com/creating-ads/designing-your-ad-in-the-fluid-ad-creator/elements/video.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.