18041 sujets

Questions générales et questions de débutants

Coup de pouce pour du responsive en html

Bonjour à tous

En premier, je dois vous dire que je suis une quiche en développement. Je viens tout juste de commencer sur le php, et pour le moment, je ne sais que ce que c'est une variable (et encore).
Même si je crois avoir utilisé des fonctions, je ne suis pas encore censé savoir ce que c'est. Smiley decu
C'est mon premier exercice pratique.

Voilà mon problème.
Il se trouve sur cette page (notez que mon niveau est tel qu'il m'a fallu 3 jours pour faire ça):

http://www.sitetest.byethost17.com/test/ok/3_week_diet.html

Voilà ce que je voulais faire.
Une page simple, contenant une vidéo, et un bouton de commande qui s'affiche au bout d'un temps donné, et le tout qui se dimensionne à l'appareil utilisé (ordi, tablette, mobile).

Plutôt simple. (Mais ça dépend pour qui)

J'ai à peu près réussi.
- La vidéo est présente
- Le bouton apparait en différé
- Le tout se redimensionne suivant l'appareil

Mais en faisant cela, j'ai du me planter dans des histoires de pixel ou de pourcentage. Je m'explique:
Je voulais que la vidéo s'affiche sur un ordinateur à 100% de sa taille, soit pour cet exemple 853x480.
Mais ce qui se passe, c'est que la vidéo s'affiche à 100% de la largeur de l'écran, ce qui fait dégueulasse. Et en plus, il faut scroller pour avoir accès au bouton.

Bref, pas top du tout.

Je cherche donc une solution à ce problème.

Voilà le code de mon fichier CSS:

 div.video {
      text-align:center;
    }
	P { text-align: center }
	img {

	max-width: 100%;
height: auto;
box-sizing: border-box;
}


Et le code de ma page html:

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

        <link rel="stylesheet" href="style.css" />
		
		<script type="text/javascript">
    function showIt() {
      document.getElementById("hid").style.visibility = "visible";
    }
    setTimeout("showIt()", 40000); // 1000 = 1 sec
    </script>
	
	<style>
	.videocontainer{
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
		overflow: hidden;
		position: relative;
	}
	.videocontainer iframe, .videocontainer embed, .videocontainer object{
		width: 100%!important; height: 100%!important;
		position: absolute;
		top: 0; left: 0;
	}
		
	</style>		

        <title>ma page</title>

</head>

<body>
            <div class="videocontainer"><iframe width="853" height="480" src="https://www.youtube.com/embed/DbUNPO4ZIvQ?list=PLo25zffnAQoegIl_5vMAkrTH2sVtetvXL&amp;controls=0&amp;autoplay=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div>
		
		<div id="hid" style="visibility: hidden">
				<p style="text-align:center;">
		<a href="http://monlien.com" target="_blank"><img src="images/instant-access.png" border="0"></p>
		</div>
		
		
</body>

</html>


Merci d'avance pour votre aide.

PS: ne soyez pas trop technique dans vos réponses SVP, sinon, je vais Smiley eek
Bonjour thierry,

Regardes, c'est tout simple :

- tu dis à ton div '.videocontainer' de se mettre en width 100%. Il prend donc tout l'espace disponible sur la page.
- à l’intérieur, tu dis à ton iframe YouTube de se mettre également en width 100%. Elle s'étire donc également sur tout l'espace disponible de la page.

La solution se trouve au niveau de l'iframe. 
<iframe width="853" height="480" ...

L'iframe possède ses dimensions naturelle, alors pourquoi les modifier ?
Supprimer ce code inutile sur ton iframe
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    top: 0;
    left: 0;


Et pour la centrer ajoutes simplement 

    display: block;
    margin: auto;


Et si tu souhaites que sur mobile la vidéo s'étire, alors là tu surcouche l'information de taille de ta vidéo à l'interieur d'un media query.

Smiley cligne
Modifié par erwan21a (18 Aug 2016 - 10:14)
Bonjour erwan21a

Merci pour l'aide.
J'ai fait les modifications que tu me proposais.

Donc là, mon code actuel est:
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

        <link rel="stylesheet" href="style.css" />
		
		<script type="text/javascript">
    function showIt() {
      document.getElementById("hid").style.visibility = "visible";
    }
    setTimeout("showIt()", 40000); // 1000 = 1 sec
    </script>
	
	<style>
	.videocontainer{
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
		overflow: hidden;
		display: block;
        margin: auto;
		max-width: 853px;
		max-height: 192px;
	}
	
		
	</style>		

        <title>ma page</title>

</head>

<body>
            <div class="videocontainer"><iframe width="853" height="480" src="https://www.youtube.com/embed/DbUNPO4ZIvQ?list=PLo25zffnAQoegIl_5vMAkrTH2sVtetvXL&amp;controls=0&amp;autoplay=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div>
		
		<div id="hid" style="visibility: hidden">
				<p style="text-align:center;">
		<a href="http://monlien.com" target="_blank"><img src="images/instant-access.png" border="0"></a></p>
		</div>
		
		
</body>

</html>


Sur un PC en plein écran, pas de soucis. Le comportement de la vidéo est celui qu'il me faut.
Mais je me retrouve avec un gros placard blanc entre la vidéo et le bouton qui apparait. (voir capture ci-dessous).

Et si je réduis, ça coince.
J'ai bien le format de la vidéo qui change.
Mais là, c'est l'image de la vidéo qui ne suit plus et qui est tronquée.

upload/62639-10.jpg
Il te manque quelques informations CSS. Smiley smile
Tu devrais avoir quelque chose dans cet esprit en lieu et place de ton style actuel


/* cas standard sur PC : la video est centrée dans son conteneur et conserve sa dimension naturelle */
.videocontainer iframe {
    display: block;
    margin: auto;
}
/* on créer un media query pour ne toucher que les petits écrans (c'est un exemple de valeur) */
@media screen and (max-width = 780px){
     /* on fixe le ratio */
     .videocontainer {
          position: relative;
          padding-top: 56.25%;
     }
     /* on positionne la video dans le container au ratio */
     .videocontainer iframe {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
     }
}

Modifié par erwan21a (18 Aug 2016 - 14:37)
Bonjour Erwan

C'est moi qui ai oublié un morceaux. J'ai divisé le CSS en 2 parties, une dans le fichier html et une dans le fichier css. Et je ne t'ai montré que la partie qui se trouve dans le html.
J'ai vu quelque part que c'était plus simple en 2 parties.

Pour info, mon css contenait ça:
 div.video {
      text-align:center;
    }
    P { text-align: center }
    img {
 
    max-width: 100%;
height: auto;
box-sizing: border-box;
}


Je vire le css de la page html et je met tout dans le css.
J'ai pris ton code tel qu'il est présenté.

Donc j'ai viré tout le css que j'avais dans ma page html et je ne conserve que le fichier css qui est maintenant comme ça:
/* cas standard sur PC : la video est centrée dans son conteneur et conserve sa dimension naturelle */
.videocontainer iframe {
    display: block;
    margin: auto;
}
/* on créer un media query pour ne toucher que les petits écrans (c'est un exemple de valeur) */
@media screen and (max-width = 780px){
     /* on fixe le ratio */
     .videocontainer {
          position: relative;
          padding-top: 56.25%;
     }
     /* on positionne la video dans le container au ratio */
     .videocontainer iframe {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
     }
}


En plein écran PC, ça fonctionne nickel. Vidéo de bonne taille et bien positionnée.
Mais si je redimensionne la fenêtre de mon navigateur, ça me fait la même chose qu'avant.
Le lecteur vidéo ne se redimensionne pas.

J'ai hébergé le tout pour avoir un visuel:
http://www.sitetest.byethost17.com/test/oktest/3_week_diet.html
Sujet clos
Aller à