Centrage iframe div

Lors du codage d'une iframe à redimensionner avec l'écran, je ne peux pas le centrer. J'ai essayé toutes les réponses de THIS question mais n'ai eu aucune chance. Ai-je manqué quelque chose d'évident ou n'y a-t-il aucun moyen de le faire?Centrage iframe div

HTML

<div class="videoWrap"> 
    <iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe> 
</div>

CSS

.videoWrap { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 
.videoWrap iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 80%; 
    height: 100%; 
}

Source

2017-04-20 alohomoira

Essayez-vous de centrer le 'iframe' dans le' div'? Ou le 'div' dans l'écran? – blackandorangecat

N'oubliez pas de marquer une réponse si vous pensez que l'une de ces solutions a aidé. Les gens sont plus susceptibles de vous aider à l'avenir s'ils voient que vous avez accepté des réponses. – blackandorangecat

@blackandorangecat Je centre l'iframe dans le div – alohomoira

Utilisation de la question que vous ... lié

.videoWrap { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.videoWrap iframe { 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
div, body, html { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<div class="videoWrap"> 
 
    <iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe> 
 
</div>

Source

2017-04-20 17:47:42 blackandorangecat

Cela utilise 'flex' qui n'est pas supporté dans les versions antérieures de 'IE' – blackandorangecat

Cela ne fonctionne pas lorsque vous l'ajoutez à un site Web avec plusieurs divs. – alohomoira

EDIT: Cela a fonctionné! Cependant 'div, body, html {...}' n'est pas nécessaire, en particulier dans un site Web avec plusieurs divs – alohomoira

Vous pouvez essayer d'appliquer margin: auto; css propriété à votre div. https://www.w3schools.com/css/css_align.asp

Source

2017-04-20 17:44:57 Frost

Essayé cela plusieurs fois avant d'interroger là. Grâce à! – alohomoira

Dans mon exemple, je suis centrage de l'élément d'emballage horizontalement et verticalement avec les réglages habituels (position: absolute` est appliquée ici), et définissant également ici la largeur et la hauteur. La vidéo elle-même remplit simplement l'enveloppe centrée.

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.videoWrap { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    /* 16:9 */ 
 
    width: 80vw; 
 
    height: 45vw; 
 
} 
 

 
.videoWrap iframe { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="videoWrap"> 
 
    <iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe> 
 
</div>

Source

2017-04-20 17:46:00 Johannes

Utilisez left: 50% et transform: translateX(-50%):

.videoWrap { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 
.videoWrap iframe { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 80%; 
    height: 100%; 
}

Source

2017-04-20 17:46:04 Toby

en utilisant 'transform:' il a redimensionné la fenêtre vidéo – alohomoira

Centrage iframe div

Répondre

Questions connexes