From 75d6cc61f4712066621a6aeb65da59bb0935ebc0 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sun, 28 Sep 2025 14:08:27 +0000
Subject: [PATCH] Add advertisements to the recommended videos section

Integrate AdSense ads into the VideoPage, displaying them after the 5th and 10th recommended videos using the `AdSenseAd` component.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 45a1dcfc-f8a2-475a-a6b9-96fbb841dc27
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/45a1dcfc-f8a2-475a-a6b9-96fbb841dc27/sMbpUIe
---
 client/src/pages/VideoPage.tsx | 42 ++++++++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index fcad506..d9cbd39 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -788,15 +788,39 @@ export default function VideoPage() {
             <h2 className="text-lg font-semibold text-bunny-light mb-4">Empfohlene Videos</h2>
             
             <div className="space-y-2">
-              {recommendedVideos.slice(0, 10).map((video) => (
-                <div
-                  key={video.id}
-                  onClick={() => {
-                    const shortId = video.id.replace(/-/g, '').substring(0, 8);
-                    setLocation(`/video/${shortId}`);
-                  }}
-                  className="flex gap-3 p-2 bg-bunny-gray/30 hover:bg-bunny-gray/50 rounded-lg cursor-pointer transition-colors"
-                >
+              {recommendedVideos.slice(0, 15).map((video, index) => (
+                <div key={video.id}>
+                  {/* Insert ad after 5th video */}
+                  {index === 5 && (
+                    <div className="w-full flex justify-center py-4 mb-2">
+                      <AdSenseAd 
+                        adSlot="8989519684"
+                        width={300}
+                        height={250}
+                        className="w-full max-w-[300px]"
+                      />
+                    </div>
+                  )}
+                  
+                  {/* Insert ad after 10th video */}
+                  {index === 10 && (
+                    <div className="w-full flex justify-center py-4 mb-2">
+                      <AdSenseAd 
+                        adSlot="8989519684"
+                        width={300}
+                        height={250}
+                        className="w-full max-w-[300px]"
+                      />
+                    </div>
+                  )}
+                  
+                  <div
+                    onClick={() => {
+                      const shortId = video.id.replace(/-/g, '').substring(0, 8);
+                      setLocation(`/video/${shortId}`);
+                    }}
+                    className="flex gap-3 p-2 bg-bunny-gray/30 hover:bg-bunny-gray/50 rounded-lg cursor-pointer transition-colors"
+                  >
                   <div className="relative w-24 h-16 bg-gray-700 rounded overflow-hidden flex-shrink-0">
                     <img
                       src={video.thumbnailUrl}