La vidéo iFrame responsive est mise à l'échelle, mais ne se centre pas

Question

TL; DR: j'ai besoin d'un iFrame mis à l'échelle pour être centré sur des tailles d'écran plus grandes. Je sais que c'est un problème dû au positionnement absolu dans la méthode. J'essaie d'intégrer un iFrame (vidéo YouTube spécifiquement) à un site Web. Comme nous sommes en 2017, je veux que le site soit réactif, et naturellement, je veux que la vidéo intégrée soit également réactive. Donc, j'ai trouvé du code en ligne qui fait cela, il semble être la méthode courante pour le dimensionnement responsive iFrames. Je comprends ce qui se passe ici.

HTML pertinent:

<div class="videoWrapper"> 
    <iframe width="530" height="315" src="https://www.youtube.com/embed/4OJWC1tn_t4" frameborder="0" allowfullscreen> 
    </iframe> 
</div> 

CSS pertinente:

.videoWrapper { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    padding-top: 20px; 
    overflow: hidden; 
} 

.videoWrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

This is where the above code gets us to.

Cela fonctionne assez bien, mais la vidéo prend 100% de l'espace de conteneurs. Il devrait cependant, c'est codé de cette façon. Mais que faire si je ne le veux pas? Il semble vraiment mauvais sur les plus grandes tailles d'écran d'avoir une vidéo qui occupe toute la fenêtre. Je n'ai pas trouvé de réponse pour que cela n'arrive pas, j'ai donc essayé de mettre mon "videoWrapper" dans un autre "videoSizer" et de le réduire à 60% avec height: auto quand la taille de l'écran est supérieure à 480px.

HTML pertinent:

<div class="videoSizer"> 
    <div class="videoWrapper"> 
     <iframe width="530" height="315" src="https://www.youtube.com/embed/4OJWC1tn_t4" frameborder="0" allowfullscreen> 
     </iframe> 
    </div> 
</div> 

CSS pertinente:

@media only screen and (min-width: 480px) { 
    .videoSizer { 
     width: 60%; 
     height: auto; 
    } 
} 

This is where the above code gets us to.

Ainsi, la taille est sur le point où je veux, et il semble bien sur la page, mais il est coincé dans le coin supérieur gauche de son conteneur. C'est comme ça que ça devrait être, c'est codé à cette position absolue dans le conteneur. Il fait ce que je lui ai dit. Cependant, ce que je ne comprends pas, et c'est là que réside le problème, quand je change le codage de position d'une façon que j'ai pensé jusqu'ici, la taille du conteneur reste la même, mais l'élément iFrame disparaît. Je voudrais donc que la vidéo soit centrée sur le site sans occuper 100% de la fenêtre, mais je n'ai aucune idée de ce qui se passe. Si quelqu'un avait des suggestions, je serais vraiment reconnaissant! J'espère que j'ai écrit cela d'une manière assez descriptive et que j'ai assez de ressources pour expliquer correctement le problème.

Réponse (crédit Lkg pour moi aider le trouver):

• Supprimer @media requête mentionnée ci-dessus. Pas nécessaire et crée des problèmes.
• Code comme dans la réponse de LKG, vue ci-dessous.

Pour calculer correctement le rembourrage inférieur en fonction de ceci: - Ajouter marge et largeurs éléments ensemble - Diviser la largeur de l'élément par la largeur de la marge (nous appellerons p1) - Diviser la hauteur de l'élément iFrame par la largeur (appelez ce p2) - Multiplier p1 par p2 - la réponse est votre nouvelle valeur bottom-padding

Answer 1

il suffit de changer pour obtenir le centre css

.videoWrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right:0; 
    margin:auto; 
} 

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.videoWrapper { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    height: 0; 
 
    padding-top: 20px; 
 
    overflow: hidden; 
 
} 
 

 
.videoWrapper iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<div class="videoWrapper"> 
 
    <iframe width="530" height="315" src="https://www.youtube.com/embed/4OJWC1tn_t4" frameborder="0" allowfullscreen> 
 
    </iframe> 
 
</div>