### [How to Add a Video Before Your Form](https://wpforms.com/developers/how-to-add-a-video-before-your-form/)

**Published:** June 9, 2020
**Author:** Umair Majeed

**Excerpt:** Would you like to add a video above your form? This tutorial will walk you through the steps needed in order to achieve this!

**Content:**

Would you like to add an engaging video above your form? Whether you’re using a standard embedded form or utilizing the Conversational Form and Form Pages addons, you can easily add a video message using a simple code snippet.

This guide will show you how to implement this feature.

## Setting Up Your Form

First, create your form and add your desired fields. If you need help creating a form, please see our guide on [creating your first form](https://wpforms.com/docs/creating-first-form/).

![create your form and add your fields](https://wpforms.com/wp-content/uploads/2020/06/wpforms-video-before-form.jpg)## Adding Your Video

To add a video above your form, you’ll need to add this code to your site. If you’re not sure how to add custom code, please see our guide on [adding JavaScript or CSS code snippets](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).

Remember to replace **999** with your form ID. If you need help finding your form ID, check out our guide on [how to find form and field IDs](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).

## Styling Your Video

To ensure your video fits properly within your form container, you can add this optional CSS. If you need help adding custom CSS, please see our [guide on adding custom CSS to your site](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).

```

iframe {
    width: 100%;
    min-height: 400px;
}
```

![Your video now shows before your form](https://wpforms.com/wp-content/uploads/2020/06/wpforms-add-video-before-form-1.jpg)The video will appear:

- Above standard embedded forms
- On Form Pages links
- On Conversational Form pages
- With responsive sizing thanks to the CSS

And that’s it! You’ve now successfully added a video to your form. Next, would you like to also change the browser tab title? Check out our tutorial on [changing the page title on browser tab](https://wpforms.com/developers/how-to-change-the-page-title-on-the-browser-tab/ "How to Change the Page Title on the Browser Tab") for details.

## Reference Action

[wpforms\_frontend\_output\_before](https://wpforms.com/developers/wpforms_frontend_output_before/ "Using the wpforms_frontend_output_before action")

**Categories:** Extending

**Tags:** PHP

---