HTML/CSS Does not show videobackground for mobile

To ensure that your video loads efficiently, you can apply preload="metadata" to your video tag and specify the second of the first frame #t=0.1 in your video source:

<video preload="metadata">
    <source src="https://example.com/foo.mp4#t=0.1" type="video/mp4">
    Your browser does not support the video tag.
</video>

If this solution doesn’t work for you, you can alternatively capture the first frame using JavaScript:

async function captureThumbnailVideo(videoURL) {
  const video = document.createElement('video');

  video.crossOrigin = 'anonymous';
  video.src = videoURL;
  video.autoplay = true;
  video.preload = 'metadata';
  // Load video in Safari / IE11
  video.muted = true;
  video.playsInline = true;

  const canvas = document.createElement('canvas');
  let thumbnail = '';
  try {
    await video.play();
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const context = canvas.getContext('2d');

    context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    const thumbnailBlob = (await new Promise((resolve) =>
      canvas.toBlob(resolve, 'image/jpeg')
    )) as Blob;
    thumbnail = URL.createObjectURL(thumbnailBlob);
  } catch (e) {
    await new Promise<void>((resolve) => {
      video.onloadedmetadata = () => {
        video.currentTime = 1; //? seek to 1 second to ensure enough video data for capture

        video.onseeked = () => {
          const context = canvas.getContext('2d');

          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;

          context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); //? draw the video frame to canvas
          video.pause();

          resolve();
        };
      };
    });
    thumbnail = canvas.toDataURL('image/png');
  }

  const duration = video.duration;

  // Destroy the video once we are done with it.
  video.pause(); // pause the video before removing it
  video.src = ''; // empty the video source to release any resources associated with it
  video.load(); // force the browser to release resources used by the video element
  video.remove();
  // Destroy the canvas once we are done with it.
  canvas.remove();

  return { thumbnail, duration };
}

const thumnail = await captureThumbnailVideo(url).then(({ thumbnail }) => {
  document.querySelector('video').setAttribute('poster', thumbnail)
}) 

If you already have a custom thumbnail, you can simply add the poster attribute to your video tag:

<video poster="/example.jpg">