Solucionado
Se o vídeo já tem uma width de 560 no HTML pq precisamos definir uma no css? Testei sem mas ele não centraliza.
5) Por fim, ajuste os espaçamentos e os estilos do mapa e do vídeo:
.mapa { padding: 3em 0; }
.mapa p { margin: 0 0 2em; text-align: center; }
.video { width: 560px; margin: 1em auto; }
hoje, com a Alura e o Google Gemini
Olá, Edmilson.
Tudo bem?
No HTML estamos atribuindo width: 560px; no vídeo que é o <iframe>, já no CSS não está atribuindo a ele de novo e sim a tag pai dele que é a <div class="video"> ela só tem a class com nome de vídeo mas ela é uma <div class="video"> então estamos deixando tanto o <iframe vídeo quanto a <div> com width: 560px;:
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>.video {
width: 560px;
margin: 2em auto;
}Espero ter ajudado.
Qualquer dúvida manda aqui no fórum. Valeu!
Fiz alguns testes aqui notei que os Widths controlam coisas diferentes, no caso o do HTML vai controlar o tamanho da tela e o do CSS a posição, para estar centralizada os dois deverão estar sempre no mesmo tamanho?
Não necessariamente, na verdade ele centralizou a <div> né, ai o vídeo dentro dela foi junto.
Precisar de ajuda manda aqui! Valeu, Edmilson.
Obrigado pela ajuda!!