Forums Développement Multimédia

Aller au contenu

Yko

Inscrit(e) (le) 29 Jul 2017
Déconnecté Dernière activité Aug 21 2017 09:04 AM
-----

Messages que j'ai postés

Dans le sujet : mettre une video background et avoir du texte par dessus

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

Dans le sujet : mettre une video background et avoir du texte par dessus

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

Dans le sujet : mettre une video background et avoir du texte par dessus

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 !

Dans le sujet : mettre une video background et avoir du texte par dessus

19 August 2017 - 20:51 PM

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

Dans le sujet : LoadMovie flash cs5

01 August 2017 - 19:18 PM

Voir le messageMonsieur Spi, le 01 August 2017 - 12:36 PM, dit :

Faire un site en Flash est une très mauvaise idée, d'ici la fin de l'année prochaine Flash sera définitivement mort pour les navigateurs.
Donc tu bosse pour rien ou presque, je te recommande plutôt de te pencher sur HTML5/Javascript si tu veux faire un site portfolio ou un CV en ligne, si c'est pour trouver du boulot ça risque de te desservir de présenter un travail entièrement en Flash.


Bonsoir,

Merci, je clos mon post, je m'oriente dans cette voie là .


Bon courage, Merci.

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