Creating a floating video ad or a sticky video on a website involves using HTML, CSS, and JavaScript.
Floating video ads offer several advantages to publishers that can lead to increased earnings:
Higher Viewability Rates: Regular video ads often get pushed off-screen as users scroll. Floating video ads stay in view as they "stick" to the browser window, increasing the chance users will actually see the ad. This can lead to higher Cost-per-View (CPV) for the publisher. https://target-video.com/floating-video-player-demo/
Increased Engagement: By staying visible, floating ads have a greater chance of capturing user attention. The engaging nature of video can further entice users to watch the ad, potentially leading to clicks and conversions, which translates to more revenue for the publisher.
Non-Intrusive Format: Unlike some pop-up ads, floating video ads are generally considered less intrusive. They don't block the main content and can often be minimized if they become bothersome. This can lead to a better user experience, which can indirectly benefit publishers by keeping users on their site longer and potentially viewing more content or ads.
Here are some additional ways floating video ads can boost earnings:
Autoplay Option: Some floating video ads can be set to autoplay with sound off. This can grab user attention and increase impressions even if they don't actively click on the ad.
Versatility Across Devices: Floating video ads work well on both desktops and mobiles, allowing publishers to reach a wider audience and potentially earn from a larger pool of ad placements.
It's important to note that using floating video ads effectively requires a balance. While they offer advantages, overusing them or making them disruptive can backfire and annoy users.
Here's a basic example of how you can implement a floating video on your webpage:
```html
<!DOCTYPE html>
<html>
<head>
<title>Floating Video </title>
<style>
/* Style for the floating ad container */
.floating-ad {
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
height: 200px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
/* Style for the close button */
.close-button {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Floating Video Ad Container -->
<div class="floating-ad">
<span class="close-button" onclick="closeAd()">X</span>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>
<script>
// Function to close the floating ad
function closeAd() {
var adContainer = document.querySelector('.floating-ad');
adContainer.style.display = 'none';
}
</script>
</body>
</html>
```
To implement this code in Blogger first you need a blogger account and a website.
1. Then in the blogger go to the Layout section.
2. When you click on the Layout section you can see something similar to the photo below, now you scroll down a bit and you can find the Add a Gadget Section by clicking on it. I guess you already know about this but if you don't then this is where you can add widgets or search bar and ads to your website manually.
3. This will pop up on your screen and now click on the HTML/JavaScript button.
4. This will pop up and this is where you can add your HTML or JavaScript codes.
In this code:
1. We create an HTML structure with a `<div>` element for the floating ad container. Inside the container, we embed a YouTube video using an `<iframe>`. You should replace `"https://www.youtube.com/embed/VIDEO_ID"` with the actual URL of your video.
2. We use CSS to style the floating ad container and the close button (represented by the 'X' in the top-right corner).
3. The `closeAd` JavaScript function is called when the close button is clicked, and it hides the floating ad container by setting its `display` property to `'none'`.
Remember to replace `"VIDEO_ID"` in the iframe source with the actual video ID or the URL of the video you want to display in your ad. You can also customize the ad's appearance and behavior further based on your specific requirements.
How to make the video autoplay:
To make the video autoplay you can add the 'autoplay' attribute to the '<iframe>' element in your HTML.
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" frameborder="0" allowfullscreen></iframe>
By adding `?autoplay=1` to the end of the YouTube video URL in the `<iframe>` `src` attribute, you're instructing the video to autoplay when the page loads. The `autoplay=1` query parameter is used for autoplay, and setting it to `1` enables autoplay.
This is just a simple example of the code and if you face any problem in your website please leave a comment in the comment section below and I will see if I can help you fix the problem.
Please share my content on social media if you find it helpful.
.png)
.png)
.png)
.png)
.png)