Solucionado
@media screen and (min-width: 768px) {
.institucional__contato-email {
display: inline-block;
}
.institucional__video {
width: 100%;
}
}Meu vídeo fica com toda a largura da tela como um viewport. Não há diferença entre width: 100%; ou width: 100vw; O que pode ser? Esta faltando alguma padding na section?
A solução que eu encontrei para ficar mais próximo do que era desejado foi width: 90%, mas queria entender o que eu posso ter deixado passar.
Oi Jaqueline! Fiz um teste aqui, mas não sei se aplicando ao seu cenário vai dar certo, pois outras propriedades do seu CSS podem influenciar no resultado final.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 0;
margin: 0;
}
@media screen and (min-width: 768px) {
.institucional__contato-email {
display: inline-block;
}
.institucional__video {
width: -webkit-available;
width: -moz-available;
width: available;
padding: 30px;
}
}
</style>
</head>
<body>
<div class="institucional__video">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/qqJ-PDZNmpo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</body>
</html>Veja se dá certo no seu contexto.
olá! é uma alteração facil,basta não colocar o simbolo % em width,ok?
@media screen and (min-width: 768px) { .institucional__contato-email { display: inline-block; }
.institucional__video {
width: 100;
}}
Nenhuma dessas respostas deu certo. Vou continuar com a minha versão de 'width: 90%' e baixar o projeto dado ao fim do curso pelo professor para dar uma inspecionada. Valeu pessoal!