Vidéo en background qui ne se lance pas ?

17 juillet 2018 à 19:42:53

Salut ! Me voilà toujours avec mon site, je pense avoir plutôt fini ma tâche, mais je rencontre un nouveau problème : la vidéo que j'ai mis en background ne se lance pas à l'ouverture de la page mais quand on la rafraîchit uniquement, ce qui n'est pas pratique du tout.

Du coup j'espère que quelqu'un pourra m'aiguiller, voilà mon code (je mets les 2 pages du site, sait-on jamais !)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Z A I U S</title>
        <link rel="shortcut icon" href="favicon.ico">

    </head>
        
    <body>

        <header>
            <div class="logo"><img src="logo.png" alt="Zaius's logo"/></div>

            <h1><div class="page22">Bienvenue</div></h1>
        
            <nav><ol><li><a href="acheter.html" style="color:white">Achat<br>Commande</a></li></ol></nav>
        
        </header>


        <video autoplay loop src="4_1.mp4" id="videoo"> </video>
    
        <div class="aa">
        <iframe width="50%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/359103530&color=%23ff5500&auto_play=false&hide_related=false&show_comments=false&show_user=false&show_reposts=false&show_teaser=true"></iframe>
        </div>

        <div class="cc">
        <iframe width="50%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/319970957&color=%23ff5500&auto_play=false&hide_related=false&show_comments=false&show_user=false&show_reposts=false&show_teaser=true"></iframe>
        </div>

        <div class="dd">
        <iframe width="50%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/465670272&color=%23ff5500&auto_play=false&hide_related=false&show_comments=false&show_user=false&show_reposts=false&show_teaser=true"></iframe>
        </div>

        <div class="ee">
        <iframe width="50%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/338354963&color=%23ff5500&auto_play=false&hide_related=false&show_comments=false&show_user=false&show_reposts=false&show_teaser=true"></iframe>
        </div>


       
    <img class="gif" src="gifzaius.gif" alt="Zaius gif"/>

    <img class="gif2" src="gifzaius2.gif" alt="Zaius gif"/>



        <footer>
            <div class="bb"> <p> Zaius's website. Made by Rayan Adamczak. </p> <br>
            <p>Contacts: <a href="https://twitter.com/medoxpas" target="_blank">@medoxpas</a> / <a href="https://twitter.com/itaky22" target="_blank">@itaky22</a></p> 
            </div>
        </footer>

    </body>

</html>

<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Z A I U S - Acheter</title>
        <link rel="shortcut icon" href="favicon.ico">

	</head>

	<body>

		<header>
            <img src="logo.png" alt="Zaius's logo"/>

            <h1><div class="page22">Bienvenue</div></h1>
        
            <div class="acc"><nav><ol><li><a href="salut2018.html">Accueil</a></li></ol></nav>
            </div>
        
        </header>


		<video autoplay loop src="4_1.mp4" id="videoo"> </video>


		<section>
			<article>
				<h4>Où me trouver ?</h4>
		 
			</article>

			<div class="liens">
			<article>
				<p style="color:black">Sur <a href="https://soundcloud.com/zaivs" target="_blank">SoundClound</a>     |
					Sur <a href="https://twitter.com/medoxpas" target="_blank">Twitter</a>           |
					Par <a href="mailto:obrg71@gmail.com" target="_blank">Mail</a>                         
				</p> 

			</article>
			</div>
		
			
			<article>
				<h4> Qui suis-je ?</h4>

			</article>
			
			

			<div class="je"><article>
				<p style="color:black" style="text-align:justify;"> Salut, moi c'est Oscar aka Zaius.<br> J'ai 18 ans et je fais des beats que je vends. Je travaille actuellement sur mon EP et je suis disponible pour toute commande.<br>
				L'intro de 4th dimension dans Kids See Ghosts me rappelle Cuphead.</p>
		
			</article></div>
			

		</section>	

			<div class="google"><iframe src="https://docs.google.com/forms/d/e/1FAIpQLScnt_VyU67RqEeTHUVVTybhCPkiMkZcGe5e3FLkgeRx1oQqhg/viewform?embedded=true" width="762" height="520" frameborder="0" >Chargement en cours...</iframe></div>


		<footer>
            <div class="foot"><p> Zaius's website. Made by Rayan Adamczak. </p> <br>
            <p>Contacts: <a href="https://twitter.com/medoxpas" target="_blank">@medoxpas</a> / <a href="https://twitter.com/itaky22" target="_blank">@itaky22</a></p> 
            </div>
        </footer>

	</body>

</html>

html
{
	overflow-x: hidden
}

a:visited
{
	color: white;
  z-index: 575;
}

a
{
	color: white;
  z-index: 575;
}

body
{	
	background:#0D0D0D;
	margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px;
  alink= white;

}

header
{
	background:#0D0D0D;
	width: 100%;
	height: 70px;
	position: fixed;
	display: flex;
	justify-content: space-around;
  z-index: 1000;
	
}


p, h2, h1
{
	font-family: Georgia, Arial;
	font-size: 200%;
 	align-content: center;
 	text-align: center;
	margin: auto; margin-top:auto; margin-bottom: auto; margin-right: auto; margin-left: auto;
	color: #A8A8A8;

}

h1
{
	letter-spacing: 10px;
	width: 100%;

}


footer
{
	background:#0D0D0D;
	font-size: 6px;
  margin-bottom: 6px;
  position:relative;
  align-content: center;
	
}

img
{
	width: 80px;
	height: 106px;
	margin-left: 5px;	
	margin-top: 5px;
}


.aa
{

   position: absolute;
   z-index: 11;
   text-align: center;
   top: 900px;
   width: 99%;
}

.cc 
{

   position: absolute;
   z-index: 12;
   text-align: center;
   top: 700px;
   width: 99%;
}

.dd
{

   position: absolute;
   z-index: 13;
   text-align: center;
   top: 500px;
   width: 99%;
}

.ee
{

   position: absolute;
   z-index: 14;
   text-align: center;
   top: 300px;
   width: 99%;
}




nav ul
{
    font-family: Georgia, Arial;
    
}

nav li
{
    
    list-style-type: none;
    text-align: center;
    align-content: center;
    margin-right: 20px;
}

nav a
{
    font-size: 1.2em;
    color: #181818;
    
}


.acc
{
  margin-right: 29px;
}



.gif
{
   position: absolute;
   z-index: 25;
   left: -100px;
   top: 300px;
   min-width:35%;
  min-height:60%;
}

.gif2
{
   position: absolute;
   z-index: 25;
  
   right: -100px;
   top: 300px;
   min-width:35%;
  min-height:60%;
}




.videoo
{

  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background-size: cover;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -100;
  display: block;
}

br {
    line-height: 80%;
}




section
{
  background-color: rgba(24,24,24,0.8);
  opacity: 0.8;
  padding: 2px 2px 2px 2px;
  width: 40%;
  z-index: 9;
  margin-top: -900px;
  margin-right: auto;
  margin-left: auto;
  font-size: 150%;

}

article
{
  
  opacity: 0.8;
  color: white;
  z-index: 20;
  text-align: center;

}

.liens
{
  color: #141414;
  height: 40px;
  font-size: 10px;
  background-color: grey;

  

  padding-top: 10px;

  

  
}

.foot
{
   position: absolute;

  width: 100%; height: 40px;
  top: 30px;
  padding-top: 3px;
  background:#0D0D0D;
  font-size: 6px;
  
  
  align-content: center;
}

.je
{
 padding: 10px 10px 10px 10px;
 z-index: 800;
 font-size: 10px;
 background-color: grey;


}

.google
{
  z-index: 900;
  position:relative;
  align-content: center;
  text-align: center;

}

Bisou !

Mewen_bzh

18 juillet 2018 à 9:18:37

Salut,

Les navigateurs modernes ont, et c'est une très bonne chose, tendance à bloquer tout ce qui a du contenu sonore et qu est en autoplay. Ne serait-ce pas un début de piste pour ton problème ?

Au passage ce serait réellement une bonne chose de vérifier et corriger ton code parce que là ça m'a découragé de fouiller plus loin.

Je te conseille pour commencer de supprimer tout les styles inlines dans ton HTML et de le mettre dans ton CSS, après tout c'est à cela que servent ces fichiers de styles.

Ensuite, pourquoi tout ton code n'est qu'une accumulation d'iframe et d'éléments positionnés en absolute ? Tu te compliques la vie pour pas grand chose (en plus d'introduire de potentielles failles de sécurité et du code déprécié et qui ne répond plus à aucune norme).

Quelques pistes :

.gif
{
   position: absolute;
   z-index: 25;
   left: -100px;
   top: 300px;
   min-width:35%;
  min-height:60%;
}
 
.gif2
{
   position: absolute;
   z-index: 25;
   
   right: -100px;
   top: 300px;
   min-width:35%;
  min-height:60%;
}

Ces deux propriétés sont strictement identiques alors pourquoi en créer deux au lieu d'une seule commune et appliquer cette dernière à tes deux éléments ? Au passage, tes deux éléments en absolute sont positionnés au même endroit donc ils devraient être superposés non ?

p, h2, h1
{
    font-family: Georgia, Arial;
    font-size: 200%;
    align-content: center;
    text-align: center;
    margin: auto; margin-top:auto; margin-bottom: auto; margin-right: auto; margin-left: auto;
    color: #A8A8A8;
 
}

Là aussi tu t'embêtes pour rien : margin est la propriété raccourcie pour margin-top, margin-right, margin-bottom et margin-left donc écrire margin: auto; suffit. C'est plus simple et cela t'évitera d'écraser une règle simple et précise par une succession de règles identiques qui font la même chose en moins bien.

body
{  
    background:#0D0D0D;
    margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px;
  alink= white;
 
}

Je ne sais pas ce que tu as voulu faire avec ce alink=white mais cela n'existe pas en CSS...

Je ne réponds pas aux messages privés.

RayanAdamczak

18 juillet 2018 à 15:03:32

Mewen_bzh a écrit:

Salut,

Les navigateurs modernes ont, et c'est une très bonne chose, tendance à bloquer tout ce qui a du contenu sonore et qu est en autoplay. Ne serait-ce pas un début de piste pour ton problème ?

Au passage ce serait réellement une bonne chose de vérifier et corriger ton code parce que là ça m'a découragé de fouiller plus loin.

Je te conseille pour commencer de supprimer tout les styles inlines dans ton HTML et de le mettre dans ton CSS, après tout c'est à cela que servent ces fichiers de styles.

Ensuite, pourquoi tout ton code n'est qu'une accumulation d'iframe et d'éléments positionnés en absolute ? Tu te compliques la vie pour pas grand chose (en plus d'introduire de potentielles failles de sécurité et du code déprécié et qui ne répond plus à aucune norme).

Quelques pistes :
.gif
{
   position: absolute;
   z-index: 25;
   left: -100px;
   top: 300px;
   min-width:35%;
  min-height:60%;
}
 
.gif2
{
   position: absolute;
   z-index: 25;
   
   right: -100px;
   top: 300px;
   min-width:35%;
  min-height:60%;
}
Ces deux propriétés sont strictement identiques alors pourquoi en créer deux au lieu d'une seule commune et appliquer cette dernière à tes deux éléments ? Au passage, tes deux éléments en absolute sont positionnés au même endroit donc ils devraient être superposés non ?
p, h2, h1
{
    font-family: Georgia, Arial;
    font-size: 200%;
    align-content: center;
    text-align: center;
    margin: auto; margin-top:auto; margin-bottom: auto; margin-right: auto; margin-left: auto;
    color: #A8A8A8;
 
}
Là aussi tu t'embêtes pour rien : margin est la propriété raccourcie pour margin-top, margin-right, margin-bottom et margin-left donc écrire margin: auto; suffit. C'est plus simple et cela t'évitera d'écraser une règle simple et précise par une succession de règles identiques qui font la même chose en moins bien.
body
{  
    background:#0D0D0D;
    margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px;
  alink= white;
 
}
Je ne sais pas ce que tu as voulu faire avec ce alink=white mais cela n'existe pas en CSS...

Salut ! Merci pour ton aide, j'ai corrigé certains éléments que tu as montré, cependant pour les gifs, ce ne sont pas les mêmes, ils ne sont pas au même endroit !

Pour la vidéo qui ne se lance pas, j'ai continué de travailler dessus hier et maintenant la vidéo s'affiche constamment sans problème.

Pour l'accumulation des iframes, je pense que c'est normal ? Car je veux en mettre plusieurs. Et je mets tout ça en absolute car sinon je n'arrive pas à les positionner comme je veux par dessus mon background vidéo.