4

Eu já tenho vários embed no meu site porém não quero ir lá e alterar 1 por 1. o que eu quero é um código para alterar todos os Iframes, com 100% da largura e height se ajustar de forma responsiva.

.conteudo{
  background-color:#f1f1f1;
  width:700px;
  height:700px;
  padding:10px;
}
<body>
  <div class="conteudo">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/-ljBNAt2gwc" frameborder="0" allowfullscreen></iframe>
  </div>
</body>

1

4 Respostas 4

7

Não é possível com CSS fazer o ajuste do vídeo, pois o vídeo esta em um Iframe, logo se usar width: quem ajustará é o Iframe, a única maneira que penso que funcionará é usar a Youtube API Iframe

Um exemplo usando somente a API do Youtube, sem precisar usar bibliotecas externas inteiras como jQuery e sem necessidade de plugins, cada vídeo vai ter que ficar assim:

<div data-youtube="[ID DO VIDEO DO YOUTUBE]" id="[ID opcional, não pode repetir]"></div>

<div data-youtube="[ID DO VIDEO DO YOUTUBE]"></div> <!-- sem id -->

<div data-youtube="[ID DO VIDEO DO YOUTUBE]" id="[ID opcional, não pode repetir]"></div>

Então com as funções nativas do JavaScript:

  • HTMLElement.dataset
  • querySelectorAll
  • addEventeListner para usar com resize da Janela

Eu criei este exemplo:

O id="" agora é opcional, se não tiver id será gerado um id neste formato: id="youtube-responsive-x" (o x será um numero)

<!-- sem id -->
<div data-youtube="M7lc1UVf-VE"></div>

<hr>

<!-- com id -->
<div data-youtube="TALH8SsQJp4" id="baz"></div>

<script>
(function (w, d) {
    var iframes = [], genericIds = 0;

    function responsiveIframe(element)
    {
        var originalWidth = element.dataset.youtubeWidth || element.clientWidth;
        var originalHeight = element.dataset.youtubeHeight || element.clientHeight;

        element.dataset.youtubeWidth = originalWidth;
        element.dataset.youtubeHeight = originalHeight;

        element.width = "100%";

        if (originalWidth != originalHeight) {
            element.height = element.clientWidth / (originalWidth / originalHeight);
        } else {
            element.height = element.clientWidth;
        }
    }

    function putPlayer(youtubeId, elementId)
    {
        var player = new YT.Player(elementId, {
            videoId: youtubeId,
            events: {
                onReady: function() {
                    var el = d.getElementById(elementId);
                    responsiveIframe(el);
                    iframes.push(el);
                }
            }
        });
    }

    w.onYouTubeIframeAPIReady = function ()
    {
        //Busca todos elementos com o atributo data-youtube (tem que ter "id")
        var els = d.querySelectorAll("[data-youtube]");

        for (var i = 0, j = els.length; i < j; i++) {
            var el = els[i];

            if (!el.id) {
                genericIds++; //Incrementa para usar nos elementos sem ID
                el.id = "youtube-responsive-" + genericIds;
            }

            putPlayer(el.dataset.youtube, el.id);
        }

        w.addEventListener("resize", function() {
            if (iframes.length) {
                for (var i = 0, j = iframes.length; i < j; i++) {
                    responsiveIframe(iframes[i]);
                }
            }
        });
    };

    //Injeta a API do Youtube
    var tag = d.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = d.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
})(window, document);
</script>

Exemplo no Jsfiddle

Nota: Não usei o Stack Snippet porque ele usa Sandbox e a API do Youtube não funciona em Sandbox

20
  • nesse caso toda vida que eu for posta um artigo com vídeo, vou ter que colocar uma div com uma id diferente? Commented 16/10/2017 às 18:00
  • Por favor cara pode fazer, preciso muito da sua ajuda Commented 16/10/2017 às 18:03
  • Funcionou perfeitamente, porém com a questão da API do Youtube na div, teria como eu colocar os atributos do Embed, poque eu não quero que apareça, vídeos relacionados ao acabar meu vídeo, ou o título do vídeo pois pode a pessoa clicar e sair do meu site, e meu interesse é ela navegar. Pode resolver mais essa questão gênio @guilhermeNascimento Commented 16/10/2017 às 18:37
  • Aconteceu algo, não que seja um problema, o script até funciona, Responsivo e tals, porém se abrir ele na tela do celular não fica responsivo e sim só na tela do computador, veja - maroclub.net/cardapio-completo-para-perder-6kg-em-15-dias nesse link você abre e pode até diminuir a tela q ele ficará responsivo, mas se abrir direto na resolução do celular ele não se ajusta Commented 16/10/2017 às 18:54
  • Moto G, android 6.0, também testei no pc, diminuindo a janela no google chrome e em seguida atualizando. Commented 16/10/2017 às 19:08
4

Da uma olhada nessa biblioteca javascript/Jquery, ela é usada para videos responsivos:

http://fitvidsjs.com/

https://github.com/davatron5000/FitVids.js

So procurar sobre fitvids.

Para o video 100% adiciona no css um seletor avançado "iframe[src*="youtube".

$(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
   $(".conteudo").fitVids();
});
.conteudo{
  background-color:#f1f1f1;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
}
iframe[src*="youtube"] {
  width:100%;
  height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js"></script>
<body>
  <div class="conteudo">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/-ljBNAt2gwc" frameborder="0" allowfullscreen></iframe>
  </div>
</body>

7
  • Coloquei mas não funcionou, Colocar no <head> pode não funcionar ? tanto o jQuery como o Css não funcionaram Commented 16/10/2017 às 17:15
  • normalmente scripts como o fitvids eu coloco no footer, na parte de baixo, no exemplo a cima, mas pode colocar no head, so ira funcionar os iframes que estiverem dentro da div com a class "conteudo". Commented 16/10/2017 às 17:21
  • Eu trabalho com o WordPress, Abri área de posts do site para procurar com Inspecionar elemento, Porém existe várias divs e coloquei algumas mas não funcionou. pode me da uma mãosinha, abra o site e olhe o a área de poste, no inspecionar Elemento, olhe se consegue identificar div com class do conteúdo. Commented 16/10/2017 às 17:27
  • joga esse código $( '.entry-content' ).fitVids(); em vez de $(".conteudo").fitVids(); Commented 16/10/2017 às 17:33
  • Já tentei essa class também mas não funcionou :´( Commented 16/10/2017 às 17:34
3

Utilizando a biblioteca fitVids, você deve selecionar via jquery o elemento pai do iframe que será responsivo.

Na documentação é possível obter mais detalhes de utilização, como ignorar alguns elementos ou selecionar elementos específicos: https://github.com/davatron5000/FitVids.js

No seu código você deve importar a biblioteca do FitVids.js e adicionar uma linha de código.

$(".conteudo").fitVids();
.conteudo{
  background-color:#f1f1f1;
  width:700px;
  height:700px;
  padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js"></script>
<body>
  <div class="conteudo">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/-ljBNAt2gwc" frameborder="0" allowfullscreen></iframe>
  </div>
</body>

2

Existem duas formas de fazer isso com CSS.

Uma é fazendo o iframe do Youtube ocupar a tela inteira, a outra e usar um hake com padding para fazer o iframe manter o aspect-ratio.

Colocando o iframe com 100% de altura e largura, sem distorcer o vídeo, ou deixar faixas pretas na lateral. Para isso foi preciso usar @media (min-aspect-ratio: 16/9) e @media (max-aspect-ratio: 16/9) para controlar o comportamento.

inserir a descrição da imagem aqui

Segue o código da imagem acima

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
iframe {
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	display: block;
}
@media (min-aspect-ratio: 16/9) {
  iframe {
    width: 100%;
	height: auto;
  }
}
@media (max-aspect-ratio: 16/9) {
  iframe {
    width: auto;
	height: 100%;
  }
}
<iframe src="https://www.youtube.com/embed/WHPEKLQID4U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Opção mantendo o aspect-ratio com o hake do padding

O padding do elemento é relativo a largura dele, e pode ser usado em porcentagem, com isso a gente pode ter um .box com 100% de largura e um padding-top que vai "forçar" a altura do box para manter uma medida de aspect-ratio.

inserir a descrição da imagem aqui

Para saber o valor desse padding-top a gente tem que saber a proporção do vídeo. Por padrão o Youtube costuma usar 9/16. Então pegamos 9 dividimos por 16 e multiplicamos por 100 e teremos o valor de 56,25% que é nosso aspect-ratio que vamos usar no valor do padding

inserir a descrição da imagem aqui

Se vc tiver um vídeo 3 / 4 = 0,75 > * 100 = 75%. Então no css vc coloca no .box o padding-top: 75% e assim vc vai manter o aspect-ratio do vídeo. Com essa técnica vc precisa de um elemento para colocar o vídeo dentro, não da para aplicar direto no iframe, pois nesse casso o iframe vai ter 100% do tamanho do .box, que por sua vez é o container que vai manter o aspecto do vídeo que está dentro dele.

Segue o código da imagem acima

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.box {
	width: 100%;
	padding-top: 56.25%;
	position: relative;
}
.box iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
<div class="box"><iframe src="https://www.youtube.com/embed/WHPEKLQID4U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>


DICA

Leitura recomendada para entender o aspect-ratio:
https://mdooh.progic.com.br/aspect-ratio/

Calculadora de aspect-ratio:
https://calculateaspectratio.com/

Documentação da Mozilla sobre aspect-ratio:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .