Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Ramon Elber

Deixar o vídeo do Youtube RESPONSIVO no site

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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;
}
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.