Deixar o vídeo do Youtube RESPONSIVO no site

[Ramon Elber 0]

Olá pessoal, blz?

Estou criando um site e a página principal já esta toda pronta, entretanto me deparei com um problema que já quebrei a cabeça, busquei dicas na internet e não conseguir resolver ainda.

Só preciso deixar o vídeo do youtube responsivo no meu site

(Por favor, se possível, preciso de um passo a passo com vocabulário simples e com a maneira mais simples possível de se executar essa tarefa, já que não tenho muito conhecimento)

Estou usando a linguagem HTML e CSS e o vídeo esta dentro de uma DIV

Este é o código do video: <iframe width="560" height="315" src="https://www.youtube.com/embed/-xE-gogMDKc" frameborder="0" allowfullscreen></iframe>

Agradeço pela ajuda e quando conseguir posto o resultado aqui.

Como estou sem grana no momento para pagar um profissional vou me virar com este site simples que estou criando e futuramente quando tiver verba solicito um profissional para fazer um site melhor.

[Junior Varoni 9]

Uma coisa simples a se fazer é colocar o width do iframe em 100% e o height auto

<iframe width="100%" src="https://www.youtube....bed/-xE-gogMDKc" frameborder="0" allowfullscreen></iframe>

E para deixar melhor ainda, você pode criar uma div e colocar esse iframe dentro dela e editar essa div no css com as media queries do css.

 

Ex:

<div class="content">
<iframe width="100%" src="https://www.youtube....bed/-xE-gogMDKc" frameborder="0" allowfullscreen></iframe>
</div>

e o css:

@media only screen and (max-width: 992px) {
.content {
  width:680px;
}
}

@media only screen and (max-width: 690px) {
  .content {
  width:580px;
}
}

[L. Henrique 179]

Você pode adicionar uma classe a esse iFrame e definir no seu CSS:

.classe {
   width: 100%;
   height: auto;
}

[Ramon Elber 0]

Pessoal,

 

Fiz das duas formas e não deu certo.

O que pode estar acontecendo?

 

Parece que a altura fica fixa em um tamanho pequeno e a largura redimensiona com relação ao tamanho da janela.

Neste caso, quando a janela esta contraída até seu tamanho minimo o vídeo fica inteiro e responsivo. Mais quando se expande a janela corta a imagem na horizontal já que o frame não se redimensiona na altura.

[Junior Varoni 9]

Você removeu o height do iframe?

Deixe só o width;

<iframe width="100%" src="https://www.youtube....bed/-xE-gogMDKc" frameborder="0" allowfullscreen></iframe>

[Ramon Elber 0]

Junior,

 

Eu removi o height, posso estar fazendo alguma coisa errada, portanto, vou refazer o procedimento que você explicou novamente.

 

 

 

Me explica uma cosa por favor a respeito do CSS (Considere que meu conhecimento é pouquíssimo)

 

Por que tem que duas medias queres assim, e onde exatamente tem que ser inserida no CSS (em qualquer lugar do arquivo CSS ou algum lugar especifico?.

 

@media only screen and (max-width: 992px) {
.content {
width:680px;
}
}

@media only screen and (max-width: 690px) {
.content {
width:580px;
}
}

 

A div content, criada em torno do iframe tem que ter mais algum parametro no CSS?

[Junior Varoni 9]

E ae Ramon,

 

os media query são utilizados para verificar o tamanho da tela, no exemplo que dei em telas com tamanho maximo de 992px aplicaram a div content um tamanho de 680px, enquanto a outra media querie aplica um tamanho de 580px na div content em tela de até no maximo 690px;

 

e em dentro de cada div.content você aplica o css normalmente.

 

Você pode utilizar várias classes dentro das media queries.

 

Esse artigo vai explicar melhor.

[Ramon Elber 0]

Ok, Junior, obrigado.

 

Vou ler o artigo, tentar resolver aqui e posto amanhã.

[Ramon Elber 0]

Junior,

Tentei várias vezes sem especificar valor pra height ou deixando no auto mais não dava resultado.

Então resolvi fazer de outra forma, não sei se é mais eficaz ou correta mais deu certo.

Primeir criei uma div class em torno do código do vídeo, conforme orientado.

Depois coloquei widt 100% e heit 100% no frame do video

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/-xE-gogMDKc" frameborder="0" allowfullscreen></iframe>

Eu queria que o width maximo fosse 560px e height maximo 315px e eu tinha que levar em consideração que esse vídeo esta dentro de uma div id que ocupa uma largura de 60% da tela e altura automatica.

Acrescentei no CSS:

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

.quadrovideo {

width:560px;

height: 315px;

}

Depois:

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

.quadrovideo {

width:448px;

height: 252px;

}

Em seguida:

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

.quadrovideo {

width:278px;

height: 154px;

}

Vejam que a medida que vai diminuindo a largura minima da tela fui diminuindo o valor em px da div (quadrovideo) e mantendo a proporção entre o width e height.

Como eu tinha determinado 100% o vídeo vai encher a div e não ficar nem maior nem menor que ela.

Depois de tudo prontinho e funcionando decidir ousar e acrescentar mais uma media intermediaria:

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

.quadrovideo {

width:355px;

height: 197px;

}

Assim descobri que posso ir aprimorando e redimensionando o tamanho da div class e consequentemente do vídeo que esta dentro dela de acordo com a necessidade.

O restante do site já tinha sido criado com grid fluid, só faltava esse vídeo que deu trabalho pra caramba mais em fim deu certo.

Obrigado pelas respostas. O Junior salvou minha vida abrindo minha mente quanto ao recurso media queries.

Um abraço.

[Junior Varoni 9]

Bom dia Ramon, está certinho o jeito que você fez

 

As media queries existem para isso mesmo.

 

Fico feliz de ter lhe ajudado. Abraço.