Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Please do not post a message for the purpose of insulting, incitement to hatred, sexual remarks and any other which does not respect our terms of use !
Sign in to follow this  
Harda

 addons Maintenance vidéo

Recommended Posts

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:

Please login or register to see this link.

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

Share this post


Link to post
Share on other sites
VIP

Share this post


Link to post
Share on other sites
VIP

Merci , sympa  la base !

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...