Redimensionar IFrame YouTube | Web Design Responsivo: Páginas que se adaptam do mobile ao desk

Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

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

08/09/2019

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.6k xp | 1640 posts

Instrutor Dev

09/09/2019

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

09/09/2019

Muito obrigado pessoal, vou tentar e posto aqui.

Valeeu!

por Estudante

| 88.6k xp | 8 posts

09/09/2019

Perfeito Lucas, era exatamente o que eu procurava.

Att Pedro