Skip to content
Log in
  • There are no suggestions because the search field is empty.

Can I use videos with transparent backgrounds as overlays?

How to deal with animated and video overlays in Adnami formats

At Adnami, we strive to provide the most impactful and reliable high-impact advertising experiences. We often get questions about using transparent video and animations, to create floating elements or overlays in Adnami formats.

Q: Can I use videos with transparent backgrounds?

A: No, Adnami does not currently support video files with transparent backgrounds within our standard templates.

While transparent video is an exciting concept, it is not yet a standardized technology across the web. This leads to several challenges that can impact the quality of your campaign:

  • Inconsistent Browser Support: Not all browsers (Chrome, Safari, Edge, etc.) handle transparent video the same way. Some may render the transparency as a solid black or white box.

  • Performance & Reliability: Transparent video files often require heavy codecs that can lead to slow loading times or playback errors, especially on mobile devices.

  • Adnami Quality Standards: To ensure your high-impact formats look perfect for every user, we only support features that work reliably across all of our certified environments.

How to achieve the same effect

If you want to have elements (like text, logos, or icons) appearing on the sides of a skin or moving over a background, here are the best ways to achieve that look without using transparent video:

1. Use Image Overlays (Recommended) The most efficient way to add elements over a video is to use high-quality .png or .svg images with transparency. By placing these as separate assets within the Adnami suite, you can position them exactly where you want them.

  • Add Movement: You can use the built-in template settings to add hovering effects and time-in / time-out settings to your overlays. This allows you to create a dynamic, animated look and feel for your skin design. Additionally this ensures that your text or logos remain crisp and are not affected by video compression.

2. Use Adnami Templates interactive templates for Skin

3. Custom HTML For more complex or interactive animations that go beyond standard transitions, you can build your overlays using HTML/CSS to create animations. This offers the most flexibility for bespoke creative visions. 

Read our guide to Responsive HTML5 to get started: https://www.adnami.io/responsive-html-guide

Need help in creating HTML5? Our team of creative experts can help you get the exact premium design that you want. Explore the options here: https://www.adnami.io/creative-production or talk to your Adnami person for more details. 

 

Technical Reminders

  • Video Size: You can deliver high-quality video up to 50MB using our streaming solution. Learn more here.

  • Creative Support: If you have a specific design that requires complex overlays, please reach out to our support team or consult the Adnami Specs Page.

 

AdOps PRO TIP: If you are worried cropping on a specific site, remember you can use the Adnami Extension Tool for chrome to test you banner live on a site! 🚀

 

 

Dive deeper into skin - explore these helpful articles:

  • Adnami's Guide to Skins: This is the ultimate resource for mastering skins. It covers everything from using overlays to choosing between Seamless and Fluid formats.

  • Difference between Fluid Skin and Seamless Skin: A great read if you aren't sure which format fits their creative assets best. It explains the structural differences (single background vs. three-panel system).