What are Rich Media Ads?

MREC Rich Media HTML5 Example

Test and preview MREC Rich Media HTML5 Example - An example of an animated rich media HTML5 ad in MREC format. Interactive Rich Media ad example with code sample.

Input Your Ad Tag below to Preview and Validate

Paste your ad tag HTML/JavaScript/iframe content directly for preview

Paste HTML/JavaScript/Iframe

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ad Creative - Medium Rectangle</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}
.ad-container {
  position: relative;
  width: 300px;
  height: 250px;
  background-color: #f59e0b;
  padding: 10px;
  border: 1px solid #e2e8f0;
  box-sizing: border-box;
  overflow: hidden;
  font-family: 'Arial', sans-serif;
}
.ad-container {
  cursor: pointer;
  transition: all 0.3s ease;
}
.ad-container:hover {
  transform: translateY(-4px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes zoomOut {
  from { opacity: 0; transform: scale(1.2); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes zoomInInfinite {
  from { transform: scale(1); }
  to { transform: scale(1.3); }
}

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-180deg) scale(0.8); }
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes blurInLeft {
  from { opacity: 0; filter: blur(8px); transform: translateX(-30px); }
  to { opacity: 1; filter: blur(0); transform: translateX(0); }
}

@keyframes blurInRight {
  from { opacity: 0; filter: blur(8px); transform: translateX(30px); }
  to { opacity: 1; filter: blur(0); transform: translateX(0); }
}

@keyframes blurInUp {
  from { opacity: 0; filter: blur(8px); transform: translateY(30px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes blurInDown {
  from { opacity: 0; filter: blur(8px); transform: translateY(-30px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes fadeOutAfter {
  to { opacity: 0; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes keyframeCTAButtonHover {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.element-image-1764224010609-0 {
position: absolute;
left: 99.5px;
top: 0px;
width: 200.5px;
height: 250px;
animation: zoomOut 300ms ease-out 0ms both, fadeOutAfter 1ms 3000ms forwards;
background-image: url('https://images.pexels.com/photos/2529147/pexels-photo-2529147.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.element-image-1764224010609-1 {
position: absolute;
left: 99.5px;
top: 0px;
width: 200px;
height: 250px;
animation: slideDown 100ms ease-out 3000ms both, fadeOutAfter 1ms 5000ms forwards;
background-image: url('https://images.pexels.com/photos/13600672/pexels-photo-13600672.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.element-image-1764224010609-2 {
position: absolute;
left: 99.5px;
top: 0px;
width: 200.5px;
height: 250px;
animation: slideRight 100ms ease-out 5000ms both;
background-image: url('https://images.pexels.com/photos/18155789/pexels-photo-18155789/free-photo-of-designer-sneakers-in-studio.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.element-shape-1764224010609-3 {
position: absolute;
left: 0px;
top: 0px;
width: 100px;
height: 250px;
animation: slideRight 300ms ease-out 0ms both;
background-color: #f59e0b;
}
.element-image-1764224010609-4 {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 250px;
animation: slideUp 100ms ease-out 5100ms both;
background-image: url('https://images.pexels.com/photos/18155789/pexels-photo-18155789/free-photo-of-designer-sneakers-in-studio.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.element-gradient-1764224010609-5 {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 250px;
animation: fadeIn 100ms ease-out 5000ms both;
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}
.element-shape-1764224010609-6 {
position: absolute;
left: 100px;
top: 0px;
width: 200px;
height: 250px;
animation: slideRight 100ms ease-out 5000ms both;
background-color: #f59e0b;
}
.element-shape-1764224010609-7 {
position: absolute;
left: 180px;
top: 105px;
width: 40px;
height: 40px;
animation: slideRight 100ms ease-out 5000ms both;
background-color: #ffffff;
border-radius: 50px;
}
.element-shape-1764224010609-8 {
position: absolute;
left: 180px;
top: 57px;
width: 40px;
height: 40px;
animation: slideRight 100ms ease-out 5100ms both;
background-color: #ffffff;
border-radius: 50px;
}
.element-text-1764224010609-9 {
position: absolute;
left: 10px;
top: 132px;
width: 85px;
height: 33px;
animation: slideLeft 100ms ease-out 500ms both, fadeOutAfter 1ms 3000ms forwards;
color: #1f2937;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-10 {
position: absolute;
left: 10px;
top: 169px;
width: 87px;
height: 30px;
animation: slideRight 100ms ease-out 600ms both, fadeOutAfter 1ms 3000ms forwards;
color: #1f2937;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-11 {
position: absolute;
left: 10px;
top: 203px;
width: 85px;
height: 30px;
animation: slideLeft 100ms ease-out 700ms both, fadeOutAfter 1ms 3000ms forwards;
color: #1f2937;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-12 {
position: absolute;
left: 10px;
top: 132px;
width: 85px;
height: 33px;
animation: slideLeft 100ms ease-out 3000ms both, fadeOutAfter 1ms 5000ms forwards;
color: #1f2937;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-13 {
position: absolute;
left: 10px;
top: 169px;
width: 87px;
height: 30px;
animation: slideRight 100ms ease-out 3100ms both, fadeOutAfter 1ms 5000ms forwards;
color: #1f2937;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-14 {
position: absolute;
left: 10px;
top: 203px;
width: 85px;
height: 30px;
animation: slideLeft 100ms ease-out 3200ms both, fadeOutAfter 1ms 5000ms forwards;
color: #1f2937;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-15 {
position: absolute;
left: 10px;
top: 132px;
width: 85px;
height: 33px;
animation: slideLeft 100ms ease-out 5000ms both;
color: #ffffff;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-16 {
position: absolute;
left: 10px;
top: 169px;
width: 87px;
height: 30px;
animation: slideRight 100ms ease-out 5100ms both;
color: #ffffff;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-17 {
position: absolute;
left: 10px;
top: 203px;
width: 85px;
height: 30px;
animation: slideLeft 100ms ease-out 5200ms both;
color: #ffffff;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-18 {
position: absolute;
left: 110px;
top: 213px;
width: 180px;
height: 27px;
animation: slideRight 200ms ease-out 5200ms both;
color: #ffffff;
font-size: 14px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
</style>
</head>
<body>
  <a href="javascript:void(0)" onclick="window.open(window.clickTag)">
    <div class="ad-container">
          <div class="element-image-1764224010609-0"></div>
    <div class="element-image-1764224010609-1"></div>
    <div class="element-image-1764224010609-2"></div>
    <div class="element-shape-1764224010609-3"></div>
    <div class="element-image-1764224010609-4"></div>
    <div class="element-gradient-1764224010609-5"></div>
    <div class="element-shape-1764224010609-6"></div>
    <div class="element-shape-1764224010609-7"></div>
    <div class="element-shape-1764224010609-8"></div>
    <div class="element-text-1764224010609-9">Step</div>
    <div class="element-text-1764224010609-10">Into</div>
    <div class="element-text-1764224010609-11">Style</div>
    <div class="element-text-1764224010609-12">Step</div>
    <div class="element-text-1764224010609-13">Into</div>
    <div class="element-text-1764224010609-14">Tomorrow</div>
    <div class="element-text-1764224010609-15">Step</div>
    <div class="element-text-1764224010609-16">Into</div>
    <div class="element-text-1764224010609-17">You</div>
    <div class="element-text-1764224010609-18">Shop the latest collection</div>
    </div>
  </a>
  
  <script>
    // Ad server replaces this value
    var clickTag = "https://click.campaign.example.com";
  </script>
  
  <script>
    const allButtons = document.querySelectorAll("[class*='element-button-']");
    allButtons.forEach(button => {
      if (button.className.includes('animate-in')) {
        button.addEventListener('animationend', () => {
          button.classList.add('hover-active');
          button.classList.remove('animate-in');
        });
      } else {
        button.classList.add('hover-active');
      }
    });
  </script>
  
</body>
</html>

Accepts HTML, JavaScript, or iframe code

Preview and Validate All Major Display Ad Tag Formats

Test HTML5, Display, and JavaScript Ad Tags With Confidence.

to view the full ad tag test report not just a preview.

The AdMeIn ad tag tester lets you inspect and troubleshoot a wide variety of formats, including HTML5 display ads, standard display ad tags, JavaScript tags, and other third-party ad scripts.

When you load a tag, the tester shows how the creative renders in a live preview, confirming your creative behaves exactly as intended before it’s used in a campaign.

Supports HTML5, JavaScript, iframe, and third-party ad tags
Sandboxed preview for safe testing of untrusted ad code
Real-time rendering to see exactly how ads will appear to users

The ad tag tester report includes:1. Reports on what scripts are executed, and which network calls are made. It’s ideal for catching errors and validating tracking2. Resource load weight to ensure heavy ads don’t impact ad performance.3. Checks total HTTP call count to ensure your ad stays within industry limits.4. Verifies total file size of all loaded assets for optimal performance and compliance.5. Detects and validates clickTag presence for proper click tracking and ad server compatibility.6. Flags unauthorized autoplay of audio or video to meet publisher and platform standards.7. Detects pop-ups and surveys to ensure a non-intrusive user experience.

Rich Media

advanced

MREC Rich Media HTML5 Example

An example of an animated rich media HTML5 ad in MREC format.

This MREC rich media HTML5 ad example showcases interactive elements such as CSS animations. Designed to fit the 300x250 MREC dimensions, it provides an engaging experience while adhering to industry standards for rich media ads. At 11KB in size, it is optimized for quick loading and performance across various devices and browsers.

Dimensions: 300x250

File Size: 11KB

Format: MREC

Duration: 15s

Last Updated: Dec 2, 2025

Ad library gallery

Browse more ad examples in the gallery for more ads and code samples.

View more Ad Examples in Gallery

CSS3 animations

User engagement features

Optimized for performance

mrec

rich media

html5

css3

animation

What is Rich Media Ads

Rich Media ads are advanced, interactive ad formats that combine animations, video, audio, dynamic elements, and user engagement features. These creatives go beyond standard banners by allowing users to interact with the ad directly—expanding, swiping, playing video, or exploring product galleries. Rich Media formats deliver higher engagement and stronger brand impact compared to static ads, making them ideal for storytelling, product showcases, and interactive experiences across mobile and desktop.

Rich media advertising pushes the boundaries of user engagement through interactive elements, video content, and dynamic creative optimization. Our rich media examples include expandable banners, interactive overlays, gamified ad units, and VPAID implementations. Each sample demonstrates advanced techniques for creating memorable ad experiences that drive higher engagement rates.

Explore more Rich Media ad examples

Technical Details

Input Your Ad Tag below to Preview and Validate

Preview and Validate All Major Display Ad Tag Formats

Test HTML5, Display, and JavaScript Ad Tags With Confidence.

MREC Rich Media HTML5 Example

Ad library gallery

What is Rich Media Ads