[Résolu] Intégration vidéo responsive HTML/CSS par Beal' - page 1

Bonjour à tous,

Voici un site en cours de construction pour un ami : http://hipsterisme.fr

C'est la page d'accueil qui me pose problème (celle sur laquelle vous arrivez en cliquant sur le lien). Côté HTML :

<?php
/*
Template Name: video
*/
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hipsterisme</title>
<link rel="stylesheet" id="storefront-style-css" href="http://hipsterisme.fr/wp-content/themes/storefront/style.css?ver=4.2.4" type="text/css" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body id="pvid">
<div id="pageac">
<p id="hipsterisme"> <a href="http://hipsterisme.fr/shop/">Hipsterisme</a></p>
     <video id="homevid" autoplay muted>
       <source src="http://hipsterisme.fr/wp-content/uploads/2015/08/Nature-flou.mp4"/>
     </video>
   </object>
 </div>
</body>
</html>

Côté CSS :

/** VIDEO **/
pvid {
	background-color: #000000;
	margin: 0;
	padding: 0;
	width: 100%;
}

@keyframes fondu {
	0% {opacity: 0;}
	25% {opacity: 0;}
	60% {opacity: .7;}
	70% {opacity: 1;}
	100% {opacity: 1;}
}

@-webkit-keyframes fondu {
	0% {opacity: 0;}
	25% {opacity: 0;}
	60% {opacity: .7;}
	70% {opacity: 1;}
	100% {opacity: 1;}
}

@-moz-keyframes fondu {
	0% {opacity: 0;}
	25% {opacity: 0;}
	60% {opacity: .7;}
	70% {opacity: 1;}
	100% {opacity: 1;}
}

@-o-keyframes fondu {
	0% {opacity: 0;}
	25% {opacity: 0;}
	60% {opacity: .7;}
	70% {opacity: 1;}
	100% {opacity: 1;}
}

#hipsterisme {
	text-align: center;
}

#hipsterisme a {
	margin-left: -4em;
	margin-top: 10em;
	border: 3px solid #222;
	padding: 10px;
	letter-spacing: 3px;
	text-decoration: none;
	z-index: 1;
	color: #fff;
	font-size: 2em;
	position: absolute;
	text-transform: uppercase;
	font-family: sans-serif;
	font-weight: 300;
	animation-name: fondu;
	animation-duration: 9s;
	transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	-moz-transition: all .5s;
	background-color: rgba(0,0,0,0.21);
}

#hipsterisme a:hover {
	border: 3px solid #FFFFFF;
	border-radius: 10px;
	background-color: rgba(255,255,255,0.17);
}

#homevid {
	top: 0;
	z-index: 0;
	position: absolute;
	width: 100%;
}

@media screen and (max-width: 1670px) {
	#homevid {
	width: auto;
	height: 100%;
	}
}

@media screen and (max-width: 800px) {
	#hipsterisme a{
	font-size: 20px;
	margin-left: -5em;
	margin-top: 5em;
	}
}

@media screen and (max-height: 800px) {
	#homevid {
	height: auto;
	width: 100%;
	}
}

@media screen and (max-height: 700px) {
	#homevid {
	width: auto;
	height: 100%;
	}
}

@media screen and (max-height: 350px;) {
	#homevid {
	height: auto;
	width: 100%;
	}
}

/** FIN VIDEO **/

Pour commencer je vous invite à me signaler la moindre erreur dans le code ou suggestion de simplification (je débute). Comme vous le voyez j'ai multiplié les @media screen pour obtenir un affichage correct sur la plupart des écrans. Le problème est qu'il y a beaucoup de tailles d'écran et de résolutions différentes et même avec tous ces @media screen on voit le background sur un Ipad tenu à l'horizontal. Auriez-vous des suggestions pour palier à ce problème d'affichage ?

Merci beaucoup !

Adrien

Intégration vidéo responsive HTML/CSS

Intégration vidéo responsive HTML/CSS

Supprimer

Modérer

Signaler le message aux modérateurs