Vidéo Viméo et Youtube responsive
devdeb22
Messages postés
31
Statut
Membre
-
devdeb22 Messages postés 31 Statut Membre -
devdeb22 Messages postés 31 Statut Membre -
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
Et voici le CSS associé
Merci pour la solution
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:
- Vidéo Viméo et Youtube responsive
- Comment télécharger une vidéo youtube - Guide
- Montage video windows - Guide
- Script vidéo youtube - Guide
- Nommez une application d'appel vidéo ou de visioconférence - Guide
- Supprimer pub youtube - Accueil - Streaming
1 réponse
Bonjour,
Tu peux simplement mettre la largeur de ton iframe en pourcentage, elle s'adaptera à la largeur des écrans :
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>
devdeb22
Messages postés
31
Statut
Membre
1
Un grand merci