Texto sobrepõe vídeo do youtube

[luccadias 0]

Seguinte fiz um site e coloquei um vídeo do youtube, ao lado do vídeo coloquei um <p>, quando a janela do site está aberta totalmente fica normal, após ir fechando o texto do <p> fica dentro do vídeo, como eu faço pra ficar ao lado ou embaixo ? para deixar o layout responsivo.

[L. Henrique 179]

Lucca,

Pesquise por media queries. Elas são responsáveis por atribuir uma propriedade CSS a classe do elemento quando a tela possuir X de largura.

Veja um exemplo:

// Essas são as propriedades que serão atribuídas a tudo normalmente.
.classe {
   width: 600px;
   background: blue;
}

// Essas serão as propriedades atribuídas quando a tela tiver até 465px no máximo.
@media screen and (max-width: 465px) {
   .classe {
      width: 300px;
      background: red;
   }
}

Com isso você pode definir a sua tag <p> para que ela vá para baixo do video. Isso pode ser feito com um position: relative, display: block... por ai vai.

[luccadias 0]

Lucca,

 

Pesquise por media queries. Elas são responsáveis por atribuir uma propriedade CSS a classe do elemento quando a tela possuir X de largura.

 

Veja um exemplo:

// Essas são as propriedades que serão atribuídas a tudo normalmente.
.classe {
   width: 600px;
   background: blue;
}

// Essas serão as propriedades atribuídas quando a tela tiver até 465px no máximo.
@media screen and (max-width: 465px) {
   .classe {
      width: 300px;
      background: red;
   }
}

Com isso você pode definir a sua tag <p> para que ela vá para baixo do video. Isso pode ser feito com um position: relative, display: block... por ai vai.

 

Esse

@media screen and (max-width: 465px)

 

é padrão ?

[L. Henrique 179]

Não. Eu posso montar ele de diversas maneiras, exemplos:

@media and (min-width: 0px){ }

@media and (max-width: 0px) { }

@media screen and (min-width: 0px) { }

@media screen and (max-width: 0px) { }

@media only screen and (min-width: 0px) { }

@media only screen and (max-width: 0px) { }

Considere que o 0px é a largura da tela e isso é você que deve definir. Inspecione o elemento da sua página no google chrome e veja em qual largura o texto começa a bugar. Pega esse valor, joga dentro da media query e trabalha as classes de texto e video dentro desse media.

Abraços!