Video background, global warming and mobile lure

Question
1

Hi, I love adding video backgrounds on webpages I’m designing but, since autoplay’s not a sure shot on many mobile browsers, I’m trying to put a full frame picture on “portrait” mobile version.
But how can I prevent the video background to appear under the edges of this frame since there’s no “show on this device” option ? (saving bandwidth won(t save the world but might slow

best regardz

a.

2

Hello Antoine!

If your video is integrated as a background, it will be displayed on all devices by default. I think the cleanest solution to work around this would be to define your background using a small code in an “Embed” and not display this embed on mobile devices.

Here’s a code snippet I found on : Comment intégrer un background vidéo fullscreen en HTML5 ? — Codeur Tuto :

<video autoplay loop muted>
	<source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4">
</video>
<style>
	video {
		height: 100vh;
		width: 100vw;
		object-fit: cover;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: -1;
	}
</style>

Here’s how to proceed:

  • Replace https://assets.codepen.io/6093409/river.mp4 with the link to your own video
  • Save the changes
  • Uncheck “Enable after consent” if it’s checked
  • Place the embed layer at the bottom so it doesn’t cover any elements on your pages
  • Set it to “Show on all pages”
  • Disable the embed on mobile devices.

Et puisqu’il me semble que tu parles français, voici le même message qu’au dessus en français :

Si ta vidéo est intégrée en tant qu’arrière plan, elle sera obligatoirement affichée sur tous les appareils. Je pense que la solution la plus propre pour contourner ça serait de définir ton fond d’écran à l’aide d’un petit code dans un “embed” (fonction Intégrer) et de ne pas afficher cet embed sur mobile.

Voici un code que j’ai trouvé sur Comment intégrer un background vidéo fullscreen en HTML5 ? — Codeur Tuto :

<video autoplay loop muted>
	<source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4">
</video>

<style>
	video {
		height: 100vh;
		width: 100vw;
		object-fit: cover;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: -1;
	}
</style>

Voici comment procéder :

  • Remplace https://assets.codepen.io/6093409/river.mp4 par le lien de ta vidéo
  • Sauvegarde
  • Décocher “Activer après consentement” si il est coché
  • Place le calque de l’embed tout en bas afin qu’il ne cache pas des éléments de tes pages
  • Règle-le sur “Afficher sur toutes les pages”
  • Désactive l’embed sur les appareils mobiles.
3

Wow ! many thanxalot Allan, it works just fine
(et ça marche aussi très bien ! merci !-)

just a strange behavior though, on the firefox mobile version, the picture I’ve put in place of the mp4 has negative colors (???) (that did not happen before, and behaves normally on other browsers)

Thanks again for your fast and enlighted reply.

best regardz

a.

4

Shame on me, night vision was activated (nocturnal mode, sorry) so Everything 's perfect

Good night :wink:

5

Super alors ! Avec plaisir.

Bonne nuit :slight_smile: