Downscaled video

Hi!
I am building a page for a coming line of products and have one small problem, the background video feature downscales even a tiny video file greatly. It is a looping 3s clip that’s 2880 × 1680 (I have tried a 1080p version as well with the same result) and weighs 913 KB. When I press the button under video settings to open it in a new tab the video is crisp and clear, but in the actual page it gets downscaled a whole lot and ends up looking like 480p and is close to unusable. Any idea why it behaves this way?
Grateful for your help!
Best,
Freddie


Hi @Freddie_Boston

The background video component is designed to do exactly that, downscale the video and compress it so it loads very fast. It is primarily intended to be used as a background.

If you want a high resolution video, you should host the file on another platform, and then embed it on your page.

I had the same problem. Webflow is downscaling my video too much on desktop making it blurry, but i noticed smaller breakpoints are fine. For now, i’m changing the video source url for screens >991px (desktop only) to the original non-transcoded file I uploaded to Webflow by making a few changes to the url.

Here is the code i used:

<script>
// Function to update video source URLs
function updateVideoSources() {
  // Find all video elements on the page
  const videos = document.querySelectorAll('video');

  // Loop through each video element
  videos.forEach(video => {
    // Get the first source element within the current video element
    const source = video.querySelector('source');
    if (source) {
      // Get the current src attribute value
      let src = source.getAttribute('src');

      // Update src to point towards the non-transcoded original file uploaded to webflow
      src = src.replace('https://assets-global.website-files.com', 'https://s3.amazonaws.com/webflow-prod-assets');
      src = src.replace('-transcode', '');

      // Update the source element's src attribute
      source.setAttribute('src', src);
      
      // Load the video
      video.load();
    }
  });
}

// Only update the video src url on desktop
if (window.innerWidth > 991) {
  updateVideoSources();
}
</script>

Please be careful when using this because i’m not sure if the original non-transcoded file that you upload will permanently stay uploaded to Webflow, or if it gets deleted after a certain amount of time. :man_shrugging:t2: