Ad Component Preview
Preview how advertising components appear on the website with different styles and configurations
Video Ads
Ads with video content - supports uploaded videos and external URLs (YouTube, Vimeo)
Video Banner Ad (Dark Style with YouTube)
This example embeds a YouTube video with autoplay, loop, and no controls.
Video Inline Ad (Featured Style with Controls)
This example shows a video with controls enabled, no autoplay.
Article content before the video ad placement...
Article content continues after the video ad...
Video Configuration Options
Set to "video" to enable video content
Upload a video file OR provide an external URL (YouTube, Vimeo, direct MP4)
Automatically play video (will be muted for browser compatibility)
Repeat video when it ends
Show play/pause, volume, and progress controls
Banner Ads
Full-width ads typically displayed at the top or bottom of pages
Default Style
Minimal Style
Featured Style
Dark Style
Inline Ads
Ads displayed within article content
Default Inline Ad
This is sample article content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
More article content continues here after the ad placement. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Sidebar Ads
Ads displayed in page sidebars, can be sticky
Sticky Top Ads
Dismissible bar that appears at the top of the page
Sticky Top Bar (Static Preview)
In production, this bar sticks to the top of the viewport and can be dismissed by the user.
Configuration Guide
How to create and configure ads in DatoCMS
Create a Campaign (Optional)
Campaigns group related ads and allow scheduling with start/end dates. Global ads run without a campaign.
Create an Advertising Asset
Set the asset type (banner, inline, sidebar, sticky_top), add creative content, and optionally link to a partner.
Configure Targeting
Target specific page types (articles, opinions, directory) and/or categories. Set position hints for placement.
Set Priority & Enable
Higher priority ads display first. Enable the ad when ready to go live.
Targeting Options
- home
- articles
- opinions
- directory
- news
- stories
- guides
- category
- top - Header area
- middle - Within content
- bottom - Footer area
- sidebar - Side panels
- default - Standard appearance
- minimal - Clean, simple look
- featured - Highlighted/promoted
- dark - Dark background
- light - Light background
Video Ad Guide
Complete instructions for creating and managing video advertisements
Create New Ad in DatoCMS
Go to DatoCMS → Advertising Assets → Create New. Fill in the basic fields: Name, Asset Type (banner/inline/sidebar), Headline, Description, CTA Text & URL.
Set Media Type to Video
Change the Media Type dropdown from "Image" to "Video". This enables the video-specific fields below.
Add Video Content
Choose ONE option: Upload Video File (MP4, WebM, MOV, AVI), YouTube URL, Vimeo URL, or Direct MP4 URL.
Configure Playback
Set Autoplay (default: ON, muted), Loop (default: ON), and Controls (default: OFF) options.
Set Targeting & Enable
Configure targeting (page types, categories, position), set priority, and toggle Enabled to go live.
Playback Options
Configure how your video plays:
Best Practices
Mobile Friendly
Use square or vertical videos for mobile. Keep file sizes under 10MB for fast loading.
Sound Off First
Autoplay videos are always muted. Design content to work without audio initially.
Keep It Short
15-30 seconds is ideal for banner ads. Inline ads can be longer with controls enabled.
Clear CTA
Include a compelling call-to-action button alongside the video for clicks.
Supported Formats
We support multiple video sources: