Forums Développement Multimédia

Aller au contenu

mettre une video background et avoir du texte par dessus

Débuté par Yko, Aug 19 2017 18:57 PM
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
  • 7012 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

#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
Retourner dans Mise en page (x)HTML / CSS

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

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