Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Redimensionar IFrame YouTube

Referente ao curso Web Design Responsivo: Páginas que se adaptam do mobile ao desk

por Estudante
| 88.6k xp | 8 posts

Boa noite pessoal!

Na resolução acima de 1000px o vídeo fica ok, abaixo disso ele não redimensiona, ele continua do mesmo tamanho e "estoura" a tela.

A resolução deve ser simples, mas não consegui.

html
                  <div class="row">
                    <div class="video">
                      <iframe id="player" class="video" src="{{$mat->urlArquivo}}?enablejsapi=1" frameborder="0"
                              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
                      </iframe>
                    </div>
                  </div>
css
    .video {
      max-width: 852px;
      max-height: 480px;
    }

Agradeço a atenção, Pedro Colognese

4 respostas
por mbthales
| 200.1k xp | 165 posts

Não entendi muito bem a sua pergunta, mas um @media não resolveria seu problema? Exemplo: 

@media (max-width: 1000px){
  iframe{
    width: 80%;
  }
}

Caso não for a solução, tente explicar melhor.

solução!
por Lucas Peixoto de Alencar Rocha
| 1056.7k xp | 1640 posts
Instrutor Dev

Olá Pedro,

Você está utilizando o Bootstrap?

Caso sim, você pode deixar responsivo assim:

<div class="embed-responsive embed-responsive-16by9">
    <iframe id="player" class="embed-responsive-item" src="{{$mat->urlArquivo}}?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

E no css remova a classe video.

Caso não, para deixar o vídeo responsivo você tem que adicionar algumas regras CSS.

Primeiro remova a classe repetida .video do iframe, e coloque outra classe única para o iframe e o container:

<div class="video resp-container">
    <iframe id="player" class="resp-iframe" src="{{$mat->urlArquivo}}?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
CSS

.video {}

.resp-container{
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
por Estudante
| 88.6k xp | 8 posts

Muito obrigado pessoal, vou tentar e posto aqui.

Valeeu!

por Estudante
| 88.6k xp | 8 posts

Perfeito Lucas, era exatamente o que eu procurava.

Att Pedro