Youtube: Vidéo intégrée compressée

Question

J'inclus une vidéo youtube via l'API iFrame. La vidéo elle-même est de forme carrée et sa largeur et sa hauteur dépendent de la taille du conteneur (un carré aussi, avec des dimensions fluides) - J'utilise CSS pour y parvenir.

Tout fonctionne plus ou moins bien, mais au début et à la fin de la vidéo (avant de commencer et après l'arrêt), le contenu est affiché avec une largeur réduite, révélant des barres latérales noires:

Une idée de ce qui se passe ou quoi faire? Est-ce que quelqu'un a fait une vidéo avec une forme irrégulière dans le contexte d'une mise en page réactive?

---

Mise à jour

Il semble que le réglage de la largeur et la hauteur à 101% aide. Je ne sais pas encore comment, cependant.

Answer 1

<div class="video_iframe_wr"> 
    <iframe/> 
</div> 


    .video_iframe_wr { 
    height: 0; 
    padding-bottom: 100%; /* that makes height = width */ 
    position: relative; 
} 

.video_iframe_wr > iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width:100%; 
    height:100%; 
}