[Feature Request] Video Backgrounds

[Lukylix]

Description

🎥 Hey there, everyone!
I wanted to share an idea. What if we had the option to set a video background? This could create an immersive experience.
The background will simply loop.
If you're excited about this possibility, please upvote this post and let's explore the potential of video backgrounds together!

Other

No response

[blibdoolpoolp]

Or even a gif.

[TheRolfFR]

I tried gif and homepage did not like that.

I ended up doing some custom JS with a mounted image directory to get it working:

/**
 * Repeats until element if found and runs callback with found result
 * @author TheRolf
 * @param {Function} Some function with a non-nullish positive result
 * @param {number} Total timeout to try
 * @param {Function} Function to call
 */
function waitForElementWithFunction(elementFunction, timeout, callback) {
  const startTime = Date.now();

  function checkElement() {
    const element = elementFunction();

    if (element) {
      callback(element);
    } else if (Date.now() - startTime < timeout) {
      setTimeout(checkElement, 100); // Check again in 100 milliseconds
    } else {
      console.error('Element not found within the specified timeout.');
      callback(undefined);
    }
  }

  checkElement();
}

/**
 * Creates html from string and appends it to current element
 * @author TheRolf
 * @param {String} str html string to append
 */
Element.prototype.appendHTML = function(str) {
  var div = document.createElement('div')
  
  div.innerHTML = str
  while (div.children.length > 0) {
    this.appendChild(div.children[0])
  }
}

function loadImageBg() {
  waitForElementWithFunction(() => document.getElementById('page_container'), 12000, (container) => {
    container.appendHTML(`<video autoplay muted loop style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: none; z-index: -1;">
      <source src="/images/galaxy.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    `)
  })
}

window.onload = () => {
  loadImageBg();
}

homepage-video-bg.mp4

[FromNetToDev]

Hello can you help? Is it enough to add a line of code to custom.js and change the path to the video file? I tried to do this and it doesn't work. Tell me what else needs to be done? Maybe you need to add something to the settings.yaml file as background?

[TheRolfFR]

You must mount your image directory to make the video available in that folder
https://gethomepage.dev/latest/configs/settings/#background-image

[retnuh-code]

maybe functionality to import youtube / vimeo copywrite free stuff

ex: Copywrite Free Vimeo