I created this widget because it can be very useful for those who are looking to add advertisement widget in their website through which they can also add banner ads, video widgets and affiliate links and in today's post we are talking about the Video Advertisement Widget.
Introduction
In this tutorial, we'll guide you step-by-step on how to create a video advertisement widget for your Blogger blog. By integrating a video ad seamlessly, you can engage your audience and create additional monetization opportunities.
Before getting started, we recommend reading our previous tutorial on Creating a static advertisement widget for Blogger . It explains the fundamentals of adding advertisement widgets and provides a solid foundation before implementing a video advertisement widget.
Once you're familiar with the previous tutorial, you can continue with this guide to build a more interactive video advertisement widget for your Blogger website.
Why Use a Video Advertisement Widget?
The Traditional image advertisements are also effective, but videos naturally seek more attention, fascinate and communicate information in a much shorter time. A well-designed video ad widget allows you to promote products, services, announcements, or affiliate offers in a more engaging way while maintaining a clean appearance on your Blogger website.
This widget is fully responsive and easy to customize, making it suitable for blogs, portfolios, business websites, and documentation pages. Whether you're promoting your own products or displaying sponsored content, it provides a professional solution without relying on third-party plugins.
Live Preview
Before installing the widget, we recommend checking the live demonstration first. This lets you see how the video advertisement behaves on different screen sizes and gives you a better understanding of its appearance before adding it to your own website.
Widget Features
The video advertisement widget has been designed with simplicity and performance in mind. Instead of adding unnecessary complexity, it focuses on providing a lightweight solution that looks modern while remaining easy to integrate into almost any Blogger template.
- Responsive layout for desktop, tablet, and mobile devices.
- Supports custom MP4 advertisement videos.
- Simple HTML, CSS, and JavaScript structure.
- Easy customization without advanced coding knowledge.
- Modern design that blends naturally with Blogger themes.
- Optimized for performance and user experience.
Before You Begin
Before installing the widget, make sure you already have your advertisement video uploaded to a reliable hosting service. We also recommend creating a backup of your Blogger theme so you can easily restore it if anything goes wrong during customization.
If you're new to editing Blogger templates, don't worry. Every step in this tutorial has been kept straightforward so even beginners can follow along without difficulty.
Installation
Installing the widget only takes a few minutes. Carefully follow each step below and avoid skipping any part of the process. This ensures the widget functions correctly after you save your theme.
- Open your Blogger Dashboard.
- Navigate to Theme → Edit HTML.
- Locate the section where you want the widget to appear.
- Paste the HTML code provided below.
- Add the required CSS styles.
- Add the JavaScript if your version of the widget requires it.
- Replace the sample video URL with your own advertisement.
- Save the changes and refresh your website.
Adding the Codes
Now comes the main part where we will add the widget in our site, so be careful and we recommend you to make a backup of your theme so that if any error happens you can restore your backup theme.
Put the below HTML Code in the respective place where you want to show the Advertisement Video.
Change the YOUR_AD_LINK_HERE to the Ad link you want to redirect the user when they click the widget.
And in the YOUR_VIDEO_URL_HERE replace it with the video url you want to show, we recommend you to use .mp4 file as it is very convenient for most of the browsers.
<div class="sr7-ad-widget" id="sr7AdWidget">
<button class="sr7-ad-close" id="sr7CloseAd" aria-label="Close Ad">
<svg class='line' viewbox='0 0 24 24'>
<path d='M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z'></path>
<path d='M9.16998 14.83L14.83 9.17004'></path>
<path d='M14.83 14.83L9.16998 9.17004'></path>
</svg>
<span class="sr7-close-tip">Close</span>
</button>
<a id="sr7AdLink"
href="YOUR_AD_LINK_HERE"
target="_blank"
rel="nofollow sponsored">
<video
id="sr7AdVideo"
autoplay
muted
loop
playsinline
webkit-playsinline
preload="metadata">
<source
src="YOUR_VIDEO_URL_HERE"
type="video/mp4">
</source>
></video>
></a>
<span class="sr7-ad-tag">Advertisement</span>
<button class="sr7-ad-sound" id="sr7SoundBtn" aria-label="Toggle Sound"> <svg id="sr7SoundIcon" class="line" viewbox="0 0 24 24"> <path d="M15 8.37003V7.41003C15 4.43003 12.93 3.29003 10.41 4.87003L7.49 6.70003C7.17 6.89003 6.8 7.00003 6.43 7.00003H5C3 7.00003 2 8.00003 2 10V14C2 16 3 17 5 17H7"></path> <path d="M10.41 19.13C12.93 20.71 15 19.56 15 16.59V12.95"></path> <path d="M18.81 9.41992C19.71 11.5699 19.44 14.0799 18 15.9999"></path> <path d="M21.15 7.80005C22.62 11.29 22.18 15.37 19.83 18.5"></path> <path d="M22 2L2 22"></path> </svg> </button>
</div>
Now we will paste the CSS. So, Open your Blogger theme, click Edit HTML, and paste the CSS code just before the </b:skin> tag.
.sr7-ad-widget{position:relative;width:100%;max-width:450px;aspect-ratio:16/9;margin:20px auto;overflow:hidden;border-radius:18px;border:1px solid #e6edf3;background:#fff;box-shadow:0 10px 25px rgba(0,0,0,.06)}
.sr7-ad-widget video{display:block;width:100%;height:100%;object-fit:cover}
.sr7-ad-tag{position:absolute;top:12px;left:12px;font-size:10px;font-weight:600;padding:4px 7px;border-radius:20px;background:rgba(255,255,255,.96);color:#57717d;border:1px solid rgba(0,0,0,.08);z-index:20}
.sr7-ad-sound{position:absolute;bottom:12px;right:12px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:rgba(255,255,255,.96);cursor:pointer;z-index:9999;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.sr7-ad-sound svg{width:20px;height:20px;display:block}
.sr7-ad-close{position:absolute;top:12px;right:12px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;border-radius:50%;background:rgba(255,255,255,.96);cursor:pointer;z-index:9999;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.sr7-ad-close svg{width:18px;height:18px;display:block}
.sr7-close-tip{position:absolute;right:46px;top:50%;transform:translateY(-50%);background:#111;color:#fff;font-size:11px;padding:5px 8px;border-radius:6px;white-space:nowrap;opacity:0;visibility:hidden;transition:.2s ease;pointer-events:none}
.sr7-ad-close:hover .sr7-close-tip{opacity:1;visibility:visible}
.sr7-ad-closed{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;font-weight:600;color:#57717d;background:rgba(255,255,255,.95);padding:10px 16px;border-radius:8px;border:1px solid #e6edf3;z-index:50}
.drK .sr7-ad-widget{background:#161b1f;border-color:#293038}
.drK .sr7-ad-tag,.drK .sr7-ad-close{background:#1f262d;color:#d7e0e6}
.drK .sr7-ad-sound{background:#1f262d;color:#d7e0e6}
.drK .sr7-close-tip{background:#2b343b;color:#fff}
.drK .sr7-ad-closed{background:#1f262d;color:#d7e0e6;border-color:#293038}Paste the JavaScript code just before the closing </body> tag in your Blogger theme, then save the changes.
<script>const adVideo=document.getElementById("sr7AdVideo"),adLink=document.getElementById("sr7AdLink"),closeBtn=document.getElementById("sr7CloseAd"),adWidget=document.getElementById("sr7AdWidget"),soundBtn=document.getElementById("sr7SoundBtn"),soundIcon=document.getElementById("sr7SoundIcon");adVideo.muted=!0,adVideo.play().catch(()=>{});const soundOnSvg=`<path d="M2 10V14C2 16 3 17 5 17H6.43C6.8 17 7.17 17.11 7.49 17.3L10.41 19.13C12.93 20.71 15 19.56 15 16.59V7.41003C15 4.43003 12.93 3.29003 10.41 4.87003L7.49 6.70003C7.17 6.89003 6.8 7.00003 6.43 7.00003H5C3 7.00003 2 8.00003 2 10Z"></path><path d="M18 8C19.78 10.37 19.78 13.63 18 16"></path><path d="M19.83 5.5C22.72 9.35 22.72 14.65 19.83 18.5"></path>`,soundOffSvg=`<path d="M15 8.37003V7.41003C15 4.43003 12.93 3.29003 10.41 4.87003L7.49 6.70003C7.17 6.89003 6.8 7.00003 6.43 7.00003H5C3 7.00003 2 8.00003 2 10V14C2 16 3 17 5 17H7"></path><path d="M10.41 19.13C12.93 20.71 15 19.56 15 16.59V12.95"></path><path d="M18.81 9.41992C19.71 11.5699 19.44 14.0799 18 15.9999"></path><path d="M21.15 7.80005C22.62 11.29 22.18 15.37 19.83 18.5"></path><path d="M22 2L2 22"></path>`;soundBtn.addEventListener("click",e=>{e.preventDefault();e.stopPropagation();if(adVideo.muted){adVideo.muted=!1;adVideo.volume=1;adVideo.play();soundIcon.innerHTML=soundOnSvg}else{adVideo.muted=!0;soundIcon.innerHTML=soundOffSvg}});closeBtn.addEventListener("click",()=>{adVideo.pause();adLink.style.display="none";if(!document.querySelector(".sr7-ad-closed")){const e=document.createElement("div");e.className="sr7-ad-closed";e.innerHTML="Ad closed";adWidget.appendChild(e)}});</script>Customization
One of the biggest advantages of this widget is its flexibility. Almost every visible element can be customized to match your website's branding. You can replace the demonstration video, modify colors, adjust spacing, change border radius, or update the destination link without affecting the overall functionality of the widget.
We recommend making small changes one at a time and previewing the results before publishing. This makes it much easier to identify any mistakes and helps maintain a consistent design across your website.
Performance Tips
Although video advertisements are more engaging than traditional image banners, they should still be optimized for the best user experience. Large video files may increase loading time, especially for visitors using slower internet connections.
For the best results, keep your advertisement videos short, compress them before uploading, and avoid placing multiple autoplay videos on the same page. A lightweight widget improves both performance and visitor satisfaction. Try to maintain the guidelines of the Adsense if you already have Adsense ads in your website.
Troubleshooting
If the widget doesn't appear correctly after installation, don't panic. Most issues are caused by an incorrect video URL, missing CSS, or accidentally removing part of the code while editing the template.
Double-check that all code has been copied correctly, verify that your video URL is publicly accessible, and clear your browser cache before testing again. If the problem persists, inspect your browser console for JavaScript errors.
Frequently Asked Questions
Can I use this widget with any Blogger template?
Yes. The widget is compatible with most Blogger templates. If your template has extensive custom modifications, you may only need to adjust the placement of the code to achieve the desired result.
Can I replace the sample video with my own advertisement?
Absolutely. Simply replace the sample MP4 URL with your own hosted video. The widget will automatically display your advertisement without requiring any additional changes.
Will the widget work on mobile devices?
Yes. The widget has been designed to be fully responsive, allowing it to adapt automatically to desktops, tablets, and smartphones for a consistent viewing experience.
Does using this widget affect website performance?
Performance mainly depends on the size and quality of your video. Using an optimized MP4 file and reliable hosting helps ensure fast loading times while keeping your website responsive.
Conclusion
You have now learned how to create and integrate a responsive video advertisement widget into your Blogger website. Besides improving the visual appeal of your advertisements, this widget offers a modern and engaging way to promote products, services, announcements, or sponsored content.
If you've already completed our previous tutorial on creating a static advertisement widget, this serves as the perfect next step in building a complete advertising system for your Blogger website. Feel free to customize the widget to match your branding and create a more engaging experience for your visitors.
Copyright (c)
www.sr7themes.eu.org
