Rendre responsive vidéo youtube [Résolu]

Signaler
Messages postés
53
Date d'inscription
samedi 28 août 2004
Statut
Membre
Dernière intervention
6 mai 2020
-
Messages postés
53
Date d'inscription
samedi 28 août 2004
Statut
Membre
Dernière intervention
6 mai 2020
-
Bonjour à tous.

Bon, ce n'est pas du php mais plutôt du html / css, mais je ne savais pas où poster ce message.

<Je débute dans le développement que j'apprends pour le plaisir. Je fais un site pour un ami. Je dois mettre une vidéo dans une page, qui est intégré dans une flexbox. Et, je n'arrive pas à la rendre responsive. C'est dimension réelles sont 560 / 315. Là, je les ai réduites pour que la vidéo tienne dans sans boîte. Mais en mode responsive sur une tablette, j'aimerais l'avoir plus grande, qu'elle s'adapte à la largeur de l'écran.

Mais, je bloque, même en suivant les explication que je trouve, en particulier sur ce forum.

<div id="about_ligne">
<div id="about_menu">
<div id="about_menu_1">
<p class="texte_about_menu bordure_boutons_about_1">Biography & Testimonials</p>
<p class="texte_about_menu bordure_boutons_about_2">The Author</p>
</div>
<div id="about_1" class="bordure_2">
<div id="plume_about">
<img src="<?= \utils\Path::images ("about_jp/about_jp_plume.png") ?>" height="150px" alt="Plume">
</div>
<div id="about_2">
<div>
My eyes were opened... Horses were not just to be used also to be communed with in an endless search for unity and communication.
</div>
<div id="signature_about" class="center">
<img src="<?= \utils\Path::images ("about_jp/about_jp_signature.png") ?>" alt="Signature JPG">
</div>
</div>
</div>
</div>
<div id="about_video">
<div class="about_video"><iframe width="350" height="197" src="https://www.youtube.com/embed/6-TRYwTNHv0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="video_2">A short film of JP enjoying his personal horse Orion (age 6). On this particular day Orion is learning piaffe, passage and pirouettes. Relaxation and obedience are top priority to JP as he teaches his young horses new movements.</div>
</div>
</div>


Comme vous le voyez, j'ai fait des imbrication de flexboxs... Y'a peut-être moyen de faire mieux, mais pour le moment, je découvre tout cela ! Flexbox, il y a peu, je ne connaissais pas !

Quand je mets le code suivant que j'ai trouvé sur ce forum, entre autre, la vidéo disparaît.

.about_video {
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.about_video iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}


Je rajoute le css complémentaire :

#about_ligne {
display: flex;
max-width: 950px;
justify-content: space-around;
padding-top: 25px;
align-items: flex-start;
margin: 0 auto;
}

#about_video{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
max-width: 400px;
}

#video_2{
font-family: 'Droid Serif', serif;
text-align: justify;
font-size: 1.2em;
color: #000000;
padding: 15px 5% 0 5%;
}


Voilà ce que je voudrais que cela donne en mode écran PC



et en mode tablette



Merci pour votre aide ; bien cordialement ; JP

3 réponses

Salut,
les flexbox sont une méthode de mise en page, rien à voir avec le responsive, c'est plutôt le contraire :
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox

Pour le responsive design vous pouvez aller voir du côté de media queries (CSS) qui permettent de spécifier différentes mises en pages selon des critères comme 'screen' pour la taille d'écran.

https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries

Il y a d'autres méthodes comme d'utiliser uniquement des dimensions relatives(comme le %) pour tout les élémens mais celle des media-queries permet d'adapter le contenu en fonctions de critères.
Cela implique de faire différentes mises en pages pour différents 'paliers' de taille d'écran et autres critères à prendre ne compte éventuellement.
Messages postés
53
Date d'inscription
samedi 28 août 2004
Statut
Membre
Dernière intervention
6 mai 2020
1
Bonjour et merci pour votre réponse. C'est bien avec des media-queries que je l'ai rendu responsive, mais pour la vidéo YouTube, je bloque. YouTube indique dans son code d'intégration des dimensions fixes. Dans ce code, les % ne fonctionnent pas.

Je vais malgré tout aller étudier les liens que vous m'avez indiqués.

Encore merci ; cordialement ; JP
Messages postés
53
Date d'inscription
samedi 28 août 2004
Statut
Membre
Dernière intervention
6 mai 2020
1
Re-bonjour

Voilà comment j'ai réglé le problème : j'ai mis la dimension que je souhaitais dans la page destinée aux écrans de pc, ici 350 - 197. Ensuite, en utilisant les media-querries, j'ai augmenté la taille de la vidéo en appliquant l'attribut zoom à la class de la vidéo.

Bon, il y a peut-être mieux, mais ça fonctionne ! :D