Full Screen Header Section - Code Issue WIX Classic

Ask the community
1

I’m having trouble with
I have a website where I want the header (first section) to automatically adjust to the browser window height, so the background video is displayed at full width and full height.

Working in
WIX Classic, Velo Code

Site link

What I’ve tried so far
I initially tried using various elements, but it seems that in Wix, you can only adjust a strip’s width using the “stretched” option, adjusting the height isn’t supported.

Next, I experimented with multiple Velo code solutions:

My first approach was to place the video as the background of a strip and use Dev Mode code to make the strip’s height adjust dynamically based on the window size. Here’s an example of one of the codes I tried (I explored several variations, but none worked as expected):

import wixWindow from 'wix-window';

let isAdjusting = false;

$w.onReady(function () {
  // Initial adjustment
  adjustStripHeight();
  
  // Adjust on window resize with debouncing
  wixWindow.onResize(() => {
    if (!isAdjusting) {
      isAdjusting = true;
      setTimeout(() => {
        adjustStripHeight();
        isAdjusting = false;
      }, 150);
    }
  });
});

function adjustStripHeight() {
  try {
    const videoStrip = $w('#VideoHeaderStrip');
    
    // Get viewport height
    const viewportHeight = wixWindow.viewportSize.height;
    
    // Full screen height (100vh)
    videoStrip.height = viewportHeight;
    
    console.log(`Strip height set to: ${viewportHeight}px`);
    
  } catch(error) {
    console.error('Error adjusting strip height:', error);
  }
}

The second approach I tried was to adjust the section height instead of the strip. I removed the strip, placed the video as the background of the header section, and used Velo code to dynamically resize the section (Several code tentative too…). However, this method was also unsuccessful.

import wixWindow from 'wix-window';

$w.onReady(() => {
  setSectionHeight();
  wixWindow.onResize(setSectionHeight);
});

function setSectionHeight() {
  const vh = wixWindow.viewportSize.height;
  $w('#section7').height = vh;
}

Another version here:

import wixWindow from 'wix-window';
// ... 
wixWindow.getBoundingRect()
.then( (windowSizeInfo) => {
    let windowHeight = windowSizeInfo.window.height;
    // 565
    let windowWidth = windowSizeInfo.window.width;
    // 1269
    let documentHeight = windowSizeInfo.document.height;
    // 780
    let documentWidth = windowSizeInfo.document.width;
    // 1269
    let scrollX = windowSizeInfo.scroll.x;
    // 0
    let scrollY = windowSizeInfo.scroll.y;
    // 120
} );


$w.onReady(function () {
  forceHeaderHeight();
  
  wixWindow.onResize(() => {
    forceHeaderHeight();
  });
});

function forceHeaderHeight() {
  const vh = wixWindow.viewportSize.height;
  
  // Get ALL elements in first section and force height
  const sections = $w('Section');
  if (sections.length > 0) {
    const header = sections[0];
    
    // Force section
    header.height = vh;
    
    // Force EVERY element inside
    try {
      header.$w('*').forEach(element => {
        if (element.height !== undefined) {
          element.height = vh;
        }
      });
    } catch(e) {}
    
    console.log(`Forced all heights to: ${vh}px`);
  }
}

Outcome
So far, I’ve spent several days trying to create a video header that automatically adjusts to different screen sizes, but I haven’t had any success. I’m beginning to doubt whether this is possible in Wix Classic. I’m hoping to connect with a Wix expert here who can help, I would really appreciate it. I look forward to your thoughts and feedback.

Thank you so much in advance!