Aller au contenu
  • Veuillez ne pas poster de message pour but d'insulter, incitation à la haine, propos sexuels et tout autre qui ne respecte pas nos conditions générales !

Maintenance vidéo

Harda

Par Harda
dans Addons

 Partager

Messages recommandés

Harda

Harda 35

Posté(e)
Posté(e)

Holà les kinders !

Bon, je vois des personnes qui cherchent comment mettre des vidéos en background, j'ai la solution ! :troll:

Je vous share donc une petite maintenance toute simple mais plutôt utile que j'ai fais.

Vous aurez besoin de télécharger une vidéo que vous renommerez video et format mp4 bien sur, et la placer la ou ce trouveras le fichier index.php.

Bref, la voici:

Lien de test:

Pour avoir accès à ce lien, merci de vous connecter.

Code tout en un (css+html): 

<!DOCTYPE html>
<html>
	<head>
		<title>Video Background</title>

		<style type="text/css">
			
			* {
				margin: 0;
				padding: 0;
			}

			body {
				font-family: Calibri, sans-serif;
			}

			.background-wrap {
				position: fixed;
				z-index: -1000;
				width: 100%;
				height: 100%;
				overflow: hidden;
				top: 0;
				left: 0;
			}
			
			#video-bg-elem {
				position: absolute;
				top: 0;
				left: 0;
				min-height: 100%;
				min-width: 100%;
			}


			.contenue {
				position: absolute;
				top: 0;
				left: 0;
				min-height: 100%;
				min-width: 100%;
				background-color: rgba(0,0,0,0.7);
			}
			.contenue h1 {
				text-align: center;
				font-size: 65px;
				text-transform: uppercase;
				font-weight: 300;
				color: #fff;
				padding-top: 15%;
				margin-bottom: 10px;
			}
			.contenue p {
				text-align: center;
				font-size: 20px;
				letter-spacing: 3px;
				color: #aaa;
			}

			
		</style>
		
		
	</head>
	<body>
		
		
		

		<div class="background-wrap">
			<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> 
				<source src="video.mp4" type="video/mp4">
				Vidéo non supporté
			</video>          
		</div>


		<div class="contenue">         
			<h1>Maintenance Simple</h1>
			<p>Nous sommes actuellement en maintenance, on revient bientot...</p>
		</div>

        

	</body>
</html>

Je p

                           Skype: Harda Web

                          Snap: rmaanmbg

311175hardahdev.png

Lien à poster
Partager sur d’autres sites
Harda

Harda 35

Posté(e)
  • Auteur
Posté(e)
Il y a 10 heures, Alexis a dit :

Meeerci ! :)

Y'a pas de quoi

 

Il y a 5 heures, Romaric a dit :

Merci , sympa  la base !

Merchii

                           Skype: Harda Web

                          Snap: rmaanmbg

311175hardahdev.png

Lien à poster
Partager sur d’autres sites
  • 5 ans plus tard...
  • 3 mois plus tard...

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...