Forums Développement Multimédia

Aller au contenu

mettre une video background et avoir du texte par dessus

CODE

5 réponses à ce sujet

#1 Yko

    Ceinture Blanche

  • Members
  • Pip
  • 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>
 


#2 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 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;
}

 


#3 Yko

    Ceinture Blanche

  • Members
  • Pip
  • 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 !!!

#4 Yko

    Ceinture Blanche

  • Members
  • Pip
  • 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 !

#5 Yko

    Ceinture Blanche

  • Members
  • Pip
  • 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 ... :D

#6 Yko

    Ceinture Blanche

  • Members
  • Pip
  • 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



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

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP