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

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

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