sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust ad placement to prevent overlapping with video content

Browse Source 
Modify the AdSenseAd component to correctly initialize and position ads, ensuring they do not obscure video playback.

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/3BEatUN
This commit is contained in:
sebastjanartic 2025-09-28 12:36:06 +00:00
parent cbad5e607d
commit e03f94b499
2 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1759062761808.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 999 KiB

37
client/src/components/adsense-ad.tsx
View File

@ -24,16 +24,24 @@ export default function AdSenseAd({
const adRef = useRef<HTMLDivElement>(null); const adRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
const initializeAd = () => { const initializeAds = () => {
const insElement = adRef.current?.querySelector('ins'); const insElements = adRef.current?.querySelectorAll('ins');
if (!insElement || insElement.dataset.adsbygoogleStatus === 'done') return; if (!insElements) return;
try { insElements.forEach((insElement) => {
// @ts-ignore if (insElement.dataset.adsbygoogleStatus === 'done') return;
(window.adsbygoogle = window.adsbygoogle || []).push({});
} catch (error) { // Check if this ad is visible (not hidden by responsive classes)
console.error('AdSense initialization error:', error); const computedStyle = window.getComputedStyle(insElement);
} if (computedStyle.display === 'none') return;
try {
// @ts-ignore
(window.adsbygoogle = window.adsbygoogle || []).push({});
} catch (error) {
console.error('AdSense initialization error:', error);
}
});
}; };
if (lazy) { if (lazy) {
@ -42,7 +50,8 @@ export default function AdSenseAd({
(entries) => { (entries) => {
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
initializeAd(); // Small delay to ensure responsive CSS has been applied
setTimeout(initializeAds, 100);
observer.disconnect(); observer.disconnect();
} }
}); });
@ -56,8 +65,8 @@ export default function AdSenseAd({
return () => observer.disconnect(); return () => observer.disconnect();
} else { } else {
// Immediate initialization // Immediate initialization with delay for responsive CSS
initializeAd(); setTimeout(initializeAds, 100);
} }
}, [adSlot, lazy]); }, [adSlot, lazy]);
@ -70,7 +79,7 @@ export default function AdSenseAd({
<div <div
className={`adsense-wrapper w-full flex justify-center ${className}`} className={`adsense-wrapper w-full flex justify-center ${className}`}
ref={adRef} ref={adRef}
style={{ width: '100%', minWidth: '320px' }} style={{ width: '100%', minWidth: '320px', position: 'relative', zIndex: 1 }}
> >
{/* Desktop ad */} {/* Desktop ad */}
<ins <ins
@ -116,7 +125,7 @@ export default function AdSenseAd({
<div <div
className={`adsense-wrapper w-full flex justify-center ${className}`} className={`adsense-wrapper w-full flex justify-center ${className}`}
ref={adRef} ref={adRef}
style={{ width: '100%', minWidth: '320px' }} style={{ width: '100%', minWidth: '320px', position: 'relative', zIndex: 1 }}
> >
<ins <ins
className="adsbygoogle" className="adsbygoogle"