Mettre un embed youtube responsive

Question

Eowynn

9 Oct 2020 à 17:48

Hello tout le monde Smiley smile

J'ai créé un bloc avec un texte à gauche et une image à droite de manière à ce qu'il soit responsive avec des media queries.
En format mobile, l'image vient se mettre au dessus ou au dessous du texte et prend 100% de la largeur d'écran. Le texte prend lui aussi 100%

J'aimerais maintenant faire le même exercice et avoir un rendu similaire avec une video embed à la place de mon image.

Bien entendu je ne souhaite utiliser que du html et du css car je les saisis en back office d'un CMS je ne peux donc pas installer boostrap et autre.

A l'heure actuelle cela ne fonctionne pas, mon embed ne se comporte pas comme je le souhaiterais c'est à dire se mettre au dessous du texte en format mobile et occuper une plus grand place, tout comme le faisait mon image avec ces mêmes propriétés

---------------------- Voici mon code ---------------


<head>
<style>
#section {
display:flex;
flex-direction:row;
}
#texte {
flex:auto;
width:60%;
height:100%;
}  
#embed{
flex:auto;
width:40%;
height:100%;
}
 
@media screen and (max-width: 1024px){
#section{
flex-direction:column;}
#texte {
padding: 0 30px;
    float: none;
    width: 100%;
    margin: 0; }
#embed{
padding-top: 0px;
    width: 100%;
    height: auto; }
}
 
</style>
</head>
 
<div id="section">
<div id="texte">
<p>Découvrez en vidéo ...</p>
 
<p>blabla</p>
 
<p>blabala</p>
 
<p>blabla</p>
</div>
 
<div id="embed"><iframe style="width:100%;" src="https://www.youtube.com/embed/DNDK0hxKoj0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
 
</div>

Modifié par Eowynn (09 Oct 2020 - 17:51)

parsimonhi

Modérateur

9 Oct 2020 à 19:37

Bonjour,

Ce code marche chez moi (du point de vue du position de la vidéo à droite en fenêtre large, et en dessous en fenêtre étroite).

Il manque cependant la balise <body>, mais c'est peut-être dû à un copier-coller trop rapide Smiley cligne

.

Dans la partie <head>, il manque aussi (pour que ce soit vraiment responsive sur mobile) :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Par contre, bien qu'elle passe en dessous du texte en fenêtre étroite, elle n'est pas visible en totalité, elle est rognée. La raison est qu'une iframe ne se réduit pas proportionnellement à ses dimensions comme le fait une image.

Pour régler ce problème, tu peux utiliser la technique dite du "padding".
Voici un code possible pour ta video :


<div id="embed">
  <div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
    <iframe style="width:100%;height:100%;position:absolute;left:0;top:0;overflow:hidden" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" src="https://www.youtube.com/embed/DNDK0hxKoj0" allowfullscreen >
    </iframe>
  </div>
</div>

Amicalement,

Eowynn

12 Oct 2020 à 09:52

Hello !
C'est super merci beaucoup pour ta réponse rapide et efficace !
Avec tes éléments j'ai réussis a avoir la mise en page voulue, et full responsive
Je remets le code complet ici car le sujet est résolu Smiley biggrin

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#section {
display:flex;
flex-direction:row;
}
#texte {
flex:auto;
width:60%;
height:100%;
}	
#embed{
flex:auto;
width:40%;
height:100%;
}

@media screen and (max-width: 1024px){
#section{
flex-direction:column;}
#texte {
padding: 0 30px;
    float: none;
    width: 100%;
    margin: 0; }
#embed {
padding-top: 0px;
padding-bottom: 20px;
    width: 100%;
    height: auto; }
}

</style></head>
<div id="section">
<div id="texte">
<p>Du blabla sur plusieurs lignes</p>
</div>

<div id="embed">
 <div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
 <iframe style="width:100%;height:100%;position:absolute;left:0;top:0;overflow:hidden" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" src="https://www.youtube.com/embed/youtubeIDici" allowfullscreen >
 </iframe>
</div>

</div>

Modifié par Eowynn (12 Oct 2020 - 09:53)

Sujet clos

CSS et mise en forme, CSS3

Mettre un embed youtube responsive