mettre une video background et avoir du texte par dessus

#1 Yko

Ceinture Blanche

Members
13 messages

Posté 19 August 2017 - 18:57 PM

Bonsoir,

J'ai un souci , je cherche désespérément a mettre une video background en fond de mon site en html5 et css3 et pouvoir mettre du texte par dessus, tout ce que j'arrive a obtenir c'est le texte a droite et la video a gauche. bien sur si je supprime ma div de texte la video devient en plein écran, alors j'ai cherché sur internet , Je sais pas là , je vais mettre un bout de code si vous avez la solution, merci, bien a vous.

<div class="intro-content">

  <div class="video"> <video id="video_background" preload="auto" autoplay loop muted volume="0">

<source src="video/clavier.mp4" type="video/mp4"> </video><div class="col-twelve"><h1></1><div class="row"> 

           <h5>Bonjour le Monde !</h5>

           <h1>Je suis Loïc</h1>

  <p class="intro-position"> <strong><span>blabla</span> <span>bla bla</span></strong> </p>

           <br>

Retour en haut

#2 Monsieur Spi

Community Manager
6952 messages

Posté 19 August 2017 - 20:15 PM

Salut,

Mets le conteneur de la vidéo en position absolute, top 0 , left 0, et en z-index : 1
Mets le conteneur de ton texte en absolute (ou relative peu importe) et en z-index : 10
Et pour finir le conteneur global doit aussi être positionné au moins en relatif.

HTML :

<div id="conteneur">

   <div id="mavideo">... ta video </div>

   <div id="montexte">... ton texte </div>

</div>

CSS :

#conteneur{

   position : relative;

}

#mavideo{

   position : absolute;

   z-index : 1;

   top : 0;

   left : 0;

}

#montexte{

   position : relative;

   z-index : 100;

}

Tutoriels AS3 >> Pong - Taquin - Memory - Tic Tac Toe - Pendu - Snake - Proximity - Cascade - Démineur - Bejeweled - Tetris - Collisions - Raycasting - Plateformes - Mode7 - Starfield - Frogger - Space Invader - Blackjack - Sudoku - Asteroids - Video Poker - Rogue Like (partie 1) - Rogue Like (partie 2) - Mastermind - Rendus 2D - Flixel - Auditorium - Particules - Pacman - Doodle Jump - Course de voiture

Tutoriels Javascript >> Pong - Taquin - Memory - Tic Tac Toe - Pendu - Snake - Proximity - Cascade - Démineur - Bejeweled - Tetris - Collisions -

Jeux perso >> Mes jeux

Retour en haut

#3 Yko

Ceinture Blanche

Members
13 messages

Posté 19 August 2017 - 20:51 PM

Bonsoir et merci pour la réponse , je vais essayer, je vous tiens au courant, merci beaucoup !!!

Retour en haut

#4 Yko

Ceinture Blanche

Members
13 messages

Posté 19 August 2017 - 21:37 PM

Bonsoir

....

Non, ca ne fonctionne pas, ah si , si je prends une page vierge html5 oui là, ca fonctionne, mais comme je suis newbie et que je trouvais l'effet sympa, je regarderais tout ca a tete reposé, deux jours que je cherche l'information dans ma tete, enfin bref, c'est deux jours de trop..

Bon week end

Merci !

Retour en haut

#5 Yko

Ceinture Blanche

Members
13 messages

Posté 20 August 2017 - 09:33 AM

bon....., deja bonjour !

J'en suis où; j'en suis que j'ai bien la video en plein écran avec mon menu en haut a gauche mais mon texte sous la video en bas a gauche

Voir ci joint le code

<!DOCTYPE html>

<!--[if IE 8 ]><html class="no-js oldie ie8" lang="en"> <![endif]-->

<!--[if IE 9 ]><html class="no-js oldie ie9" lang="en"> <![endif]-->

<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->

<head>

<script type="text/javascript">

        //<!--

                document.oncontextmenu = new Function("return false");

        //-->

        </script>

   <!--- basic page needs

   ================================================== -->

   <meta charset="utf-8">

<title>YkoDesign</title>

<meta name="description" content="">

<meta name="author" content="">

           <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="css/style.css" rel="stylesheet">

   <!-- mobile specific metas

   ================================================== -->

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <!-- CSS

   ================================================== -->

   <link rel="stylesheet" href="css/base.css">

   <link rel="stylesheet" href="css/main.css">

   <link rel="stylesheet" href="css/vendor.css">        

   <!-- script

   ================================================== -->  

<script src="modernizr.js"></script>

<script src="pace.min.js"></script>

<script src="js/animated-headline.js"></script>

         <link href="css/bootstrap.min.css" rel="stylesheet">

        <link href="ionicons/css/ionicons.min.css" rel="stylesheet">

================================================== -->

<link rel="icon" type="png" href="images/favicon.png">

<style type="text/css">

@media (orientation:landscape){

.nothing {

}

}

        </style>

</head>

<body id="top">

          <header>  

        <div class="row">

<div class="top-bar"> <a class="menu-toggle" href="index.html"><span>Menu</span></a>

          <nav id="main-nav-wrap">

         <ul class="main-navigation">

          <li class="current"><a class="smoothscroll"  href="#intro" title="">Accueil</a></li>

          <li><a class="smoothscroll"  href="#about" title="">Mon parcours</a></li>

          <li><a class="smoothscroll"  href="#resume" title="">CV</a></li>

          <li><a class="smoothscroll"  href="#portfolio" title="">Portfolio</a></li>

          <li><a class="smoothscroll"  href="#services" title="">A votre service ! </a></li>    

          <li><a class="smoothscroll"  href="#contact" title="">Contactez moi</a></li>

          <li><a class="smoothscroll"  href="#Vichy" title="">Vichy</a></li>

         </ul>

   </nav>

</div> <!-- /top-bar -->

<!-- /row -->  

   </header> <!-- /header -->

<section id="intro" class="montexte" id="conteneur">  

        <div class="intro-overlay" class="montexte" id="conteneur" <div id="mavideo"> <div class="video"> <video preload="auto" autoplay loop muted class="video" id="video" volume="0">

          <nav>teste</nav>

<source src="video/clavier.mp4" type="video/mp4"> </video></div> </div>

<div id="mavideo"> <div class="video"> <video id="video_background" preload="auto" autoplay loop muted volume="0">

<source src="video/clavier.mp4" type="video/mp4"> </video></div>

        <div class="intro-content" class="montexte" id="conteneur">

         <div class="row" class="montexte" id="conteneur">

          <div class="col-twelve" class="montexte" id="conteneur">

</div>

           <h5 id="montexte">Bonjour le Monde !</h5>

           <h1 id="montexte">Je suis Loïc GERMAIN</h1>

  <p class="intro-position" id="montexte"> <strong id="montexte"><span>Integrateur Web</span> <span>Webdesigner</span></strong> </p>

           <br>

<a class="button stroke smoothscroll id="montexte" href="#about" title="">C'est parti !!</a>

          </div>

         </div>   

        </div>

</section>

   </section> <!-- /process-->  

</body>

</html>

et j'avoue j'ai besoin d'aide, vraiment ! . Merci beaucoup, bon dimanche. ah une chose, je suis sous dreamweaver ...

Retour en haut

#6 Yko

Ceinture Blanche

Members
13 messages

Posté 20 August 2017 - 15:33 PM

ca fonctionne, j'ai trouvé autrement aussi, donc je donne l'astuce entre les balises <head> et </head> mettre ce code :

#video{

position: absolute;

bottom: 0px;

right: 0px;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

z-index: -1000;

overflow: hidden;

}

body{

margin: 0;

}

.header{

position:relative;

width:100%;

height: 120px;

background-color: rgba(0,0,0,0.2);

z-index: 1;

}

.titre-centre{

position: absolute;

top: 50%;

left: 50%;

width:280px;

height:70px;

margin-left: -140px;

margin-top: -35px;

font-size: 60px;

font-family: helvetica;

color: rgba(200,200,200,0.7);

z-index: 2;

}

div.content {

width:300px;

height:150px;

margin-top: 5%;

margin-left: 60%;

padding: 60px 40px 40px 40px;

background-color:rgba(200,200,200,0.4);

-moz-border-radius:8px;

-webkit-border-radius:8px;

-ms-radius:8px;

border-radius: 8px;

}

h2.text-content {

color: #aaaaaa;

}

a {

text-decoration:none;

}

a:hover{

color:#00aaaa;

}

        </style>

</head>

ensuite il faut créer une balise <div> comme ici

<div class="video"><video id="video" preload="auto" autoplay loop muted volume="0">

<source src="video/clavier.mp4" type="video/mp4">

</video>

et voila j'ai mon texte par dessus ma video qui est en plein écran, Merci a tous

Retour en haut

mettre une video background et avoir du texte par dessus

#1 Yko

#2 Monsieur Spi

#3 Yko

#4 Yko

#5 Yko

#6 Yko

1 utilisateur(s) li(sen)t ce sujet