Vidéo Viméo et Youtube responsive

devdeb22 Messages postés 28 Date d'inscription   Statut Membre Dernière intervention   -  
devdeb22 Messages postés 28 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je suis désespéramment à la recherche de l'erreurs que j'ai faite.

Car j'ai suivi tout ce que j'ai pu trouvé sur internet et je n'arrive pas à rendre cette vidéo responsive.

Voici le problème :

Je souhaite rendre la vidéo indiqué dans l'iframe responsive.

Après avoir intégrer la vidéo dans le code html, j'ai suivi les tuto que j'ai trouvé sur le net.
Mais je ne sais pas pourquoi ça ne fonctionne pas et je n'arrive pas à identifier l'erreur.

Voici le code HTML


<section class="PresentationVideo">
<p class="Problematique">.......... </p>



<div class="VideoContainer">


<iframe width="560" height="315" src="https://www.youtube.com/embed/ESsKJxVSqpM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</section>



Et voici le CSS associé


.VideoContainer {
width: 100%;
height: 0;
position: relative;
padding-bottom: 56.25%; /* ratio 16/9 */
overflow: hidden;
}

.VideoContainer iframe{
width:100%!important;
height:100%!important;
position:absolute;
left:0;
top:0;
}

.PresentationVideo {
width : 90%;
background-color: RGB(93, 173, 226);
margin: 0 auto;
border-radius: 20px;
box-shadow: 5px 5px 30px black;
}




Merci pour la solution
A voir également:

1 réponse

dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention   1 452
 
Bonjour,

Tu peux simplement mettre la largeur de ton iframe en pourcentage, elle s'adaptera à la largeur des écrans :

<iframe width="50%" height="315" src="https://www.youtube.com/embed/ESsKJxVSqpM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>


0
devdeb22 Messages postés 28 Date d'inscription   Statut Membre Dernière intervention   1
 
Un grand merci
0