I have been trying to display ads on my html website using YouTube videos but when I run the code it does not show them. I am now not sure if I have to check my Google Account or I have not placed the ad unit properly on my html code.
Here is my full html code of my static website for ebooks, that contains the ad unit I have pasted from Googe AdSense website:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Listing</title>
<style>
body {
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
h1 {
color: #fff;
}
.subheading {
color: #ff0000;
background-color: #000;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
text-transform: uppercase;
}
.price-statement {
color: #fff;
background-color: red;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
text-transform: uppercase;
}
.products {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin: 20px 0;
}
.product {
position: relative;
width: 150px;
height: auto;
border: 1px solid #fff;
border-radius: 5px;
overflow: hidden;
}
.product img {
width: 100%;
height: auto;
}
.link-buttons {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
box-sizing: border-box;
opacity: 0;
transition: opacity 0.3s ease;
}
.product:hover .link-buttons {
opacity: 1;
}
.link-buttons a {
display: block;
color: #fff;
text-decoration: none;
margin: 5px 0;
padding: 5px 10px;
background-color: #555;
border-radius: 5px;
}
.store-section {
margin-top: 40px;
text-align: center;
}
.store-section h2 {
margin-bottom: 20px;
color: #ff0000;
}
.store-images {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.store-images img {
width: 100px;
height: auto;
border-radius: 5px;
}
.plus-sign {
font-size: 40px;
color: #fff;
}
.ad-responsive {
margin: 20px 0;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>TAB Group</h1>
<div class="subheading">Released books</div>
<div class="price-statement">EACH SOLD FOR LESS THAN $5!!!</div>
<!-- Google Responsive Ad -->
<div class="ad-responsive">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3449181447032385"
crossorigin="anonymous"></script>
<!-- TAB Group responsive ad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3449181447032385"
data-ad-slot="3266690226"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="products">
<!-- Example product with smaller image -->
<div class="product">
<img src="https://pbs.twimg.com/media/GOMh316X0AgiQrF?format=jpg&name=small" alt="Tweet Image">
<div class="link-buttons">
<a href="https://www.barnesandnoble.com/w/my-pets-fun-facts-the-tab-group/1144926171;jsessionid=4A434C5CCBAC3B04A983C31F52325A03.prodny_store01-atgap08?ean=2940179773771" target="_blank">Buy at BARNES&NOBLE</a>
<a href="https://www.kobo.com/za/en/ebook/my-pet-s-fun-facts" target="_blank">Buy at Rakuten Kobo</a>
<a href="https://books.apple.com/us/book/my-pets-fun-facts/id6478167099" target="_blank">Buy at Apple Books</a>
<a href="https://fable.co/book/x-9798224957019" target="_blank">Buy at Fable</a>
<a href="https://www.smashwords.com/books/view/1525080" target="_blank">Buy at Smashwords</a>
</div>
</div>
<div class="store-section">
<h2>Get our books in any of these stores!</h2>
<div class="store-images">
<img src="https://pbs.twimg.com/media/GU40zBxWAAEwD6Y?format=jpg&name=240x240" alt="Store 1">
<img src="https://pbs.twimg.com/media/GU40y_MXEAA9Vyh?format=jpg&name=240x240" alt="Store 2">
<img src="https://pbs.twimg.com/media/GU40zB7WgAAUOM-?format=jpg&name=240x240" alt="Store 3">
<img src="https://pbs.twimg.com/media/GU40zB7XMAASzq3?format=jpg&name=240x240" alt="Store 4">
<span class="plus-sign">+</span>
</div>
</div>
</div>
</body>
</html>
Please assist me in how to structure the ad unit on my html code I have shared above
1