Vidéo Viméo et Youtube responsive

Fermé
devdeb22 Messages postés 30 Date d'inscription mercredi 18 avril 2018 Statut Membre Dernière intervention 9 février 2020 - 7 mai 2018 à 00:58
devdeb22 Messages postés 30 Date d'inscription mercredi 18 avril 2018 Statut Membre Dernière intervention 9 février 2020 - 7 mai 2018 à 09:41
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 mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
7 mai 2018 à 07:48
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 30 Date d'inscription mercredi 18 avril 2018 Statut Membre Dernière intervention 9 février 2020 1
7 mai 2018 à 09:41
Un grand merci
0