Reduza um vídeo do YouTube para uma largura responsiva

125

Eu tenho um vídeo do YouTube incorporado em nosso site e, quando reduzo a tela para tamanhos de tablet ou telefone, ele pára de diminuir em torno de 560 px de largura. Esse padrão é para vídeos do YouTube ou posso adicionar algo ao código para torná-lo menor?

MattM
fonte
1
Bom recurso para gerar seu código de incorporação responsivo: embedresponsively.com
ThisClark

Respostas:

268

Você pode tornar os vídeos do YouTube responsivos com CSS. Coloque o iframe em uma div com a classe "videowrapper" e aplique os seguintes estilos:

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

A div .videowrapper deve estar dentro de um elemento responsivo. O preenchimento no .videowrapper é necessário para impedir o colapso do vídeo. Você pode precisar ajustar os números, dependendo do seu layout.

magi182
fonte
Obrigado! Eu tive que adicionar uma largura: 100% ao meu #content para garantir que fosse um elemento responsivo.
MattM
6
Veja também: css-tricks.com/NetMag/FluidWidthVideo/…
Blazemonger 4/14
1
no meu caso, o vídeo não aparece ao aplicar este CSS.
precisa saber é o seguinte
5
a explicação detalhada sobre o número 56.25%e 25pxpode ser lida em alistapart.com/article/creating-intrinsic-ratios-for-video padding-bottom: 56.25% : Para criar uma proporção 16: 9, precisamos dividir 9 por 16 (0,5625 ou 56,25%). padding-top: 25px: Para evitar problemas com o modelo de caixa quebrada (IE5 ou IE6 no modo quirks), usamos a parte superior do preenchimento em vez da altura para criar espaço para o cromo.
Tun
Você pode assistir o exemplo iframe youtube Aqui @ http://alistapart.com/d/creating-intrinsic-ratios-for-video/example4.html
Vignesh Chinnaiyan
26

Se você estiver usando o Bootstrap, também poderá usar uma incorporação responsiva. Isso automatizará totalmente a resposta do (s) vídeo (s).

http://getbootstrap.com/components/#responsive-embed

Há algum código de exemplo abaixo.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
illage4
fonte
1
vale acrescentar que você deve inseri-las em algumas colunas ... etc. para evitar aumentar a largura do vídeo.
madrugada
Isto é incrível
jastr
Além disso, para manter o vídeo centralizado, não se esqueça de usar o deslocamento. Por exemplo:col-sm-8 col-sm-offset-2
Nicolas
9

Usei o CSS na resposta aceita aqui para meus vídeos responsivos do YouTube - funcionou muito bem até o YouTube atualizar seu sistema no início de agosto de 2015. Os vídeos no YouTube têm as mesmas dimensões, mas por qualquer motivo o CSS na resposta aceita agora letterboxes todos os nossos vídeos. Faixas pretas na parte superior e inferior.

Andei com os tamanhos e resolvi me livrar do preenchimento superior e alterar o preenchimento inferior para 56.45%. Parece ter uma boa aparência.

.videowrapper {
    position: relative;
    padding-bottom: 56.45%;
    height: 0;
}
McNab
fonte
1
Apenas uma atualização sobre isso - às vezes as imagens antigas de espaço reservado usadas nos vídeos fazem parecer que ainda existem faixas pretas na parte superior e inferior, mas os próprios vídeos ficam bem com essa nova configuração quando você realmente começa a reproduzi-las. Grrr, obrigado YouTube.
19415 McNab
1
Obrigado. Usando padding-bottom: 50% se livrar da parte superior e barras pretas de fundo para o vídeo que estou usando, embora pareça que a miniatura e o vídeo em si tem proporções incompatíveis ...
MSC
8

Solução refinada de Javascript apenas para YouTube e Vimeo usando jQuery.

// -- After the document is ready
$(function() {
  // Find all YouTube and Vimeo videos
  var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']");

  // Figure out and save aspect ratio for each video
  $allVideos.each(function() {
    $(this)
      .data('aspectRatio', this.height / this.width)
      // and remove the hard coded width/height
      .removeAttr('height')
      .removeAttr('width');
  });

  // When the window is resized
  $(window).resize(function() {
    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {
      var $el = $(this);
      // Get parent width of this video
      var newWidth = $el.parent().width();
      $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));
    });

  // Kick off one resize to fix all videos on page load
  }).resize();
});

Simples de usar apenas com incorporação:

<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>

Ou com estrutura de estilo responsivo como o Bootstrap.

<div class="row">
  <div class="col-sm-6">
    Stroke Awareness
  <div class="col-sm-6>
    <iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
  • Depende da largura e altura do iframe para preservar a proporção
  • Pode usar a proporção para largura e altura ( width="16" height="9")
  • Aguarda até que o documento esteja pronto antes de redimensionar
  • Usa o *=seletor de substring jQuery em vez do início da string^=
  • Obtém a largura de referência do pai iframe do vídeo em vez do elemento predefinido
  • Solução Javascript
  • Sem CSS
  • Não é necessário invólucro

Obrigado a @Dampas pelo ponto de partida. https://stackoverflow.com/a/33354009/1011746

mindriot
fonte
Funciona perfeitamente! Muito obrigado :)
Laran Evans
Isso ajuda. Especialmente nos casos em que você não tem controle sobre os elementos HTML (mas JS) e não pode definir um videowrap. Obrigado.
Kai Noack #
Observe que esta solução vinculará o evento de redimensionamento a uma função JavaScript, o que pode causar estresse no navegador à medida que mais eventos são adicionados. Lembre-se de que você pode usar JavaScript para agrupar o iframe em uma div de wrapper para permitir que o CSS lide com o estilo responsivo e melhore o desempenho.
railgun
Eu tentei muitas soluções. Esta é a melhor solução na Internet para tornar os vídeos do YouTube responsivos.
9117 Nick Dan
1

Este é um tópico antigo, mas encontrei uma nova resposta em https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

O problema com a solução anterior é que você precisa ter uma div especial em torno do código de vídeo, o que não é adequado para a maioria dos usos. Então, aqui está a solução JavaScript sem div especial.

// Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!!
var $allVideos = $("iframe[src^='https://www.youtube.com']"),

// The element that is fluid width
$fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

    $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

    var newWidth = $fluidEl.width();

    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {

        var $el = $(this);
        $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));

    });

// Kick off one resize to fix all videos on page load
}).resize();

// END RESIZE VIDEOS
Dampas
fonte
1

A solução do @ magi182 é sólida, mas falta a capacidade de definir uma largura máxima. Eu acho que uma largura máxima de 640px é necessária porque, de outro modo, a miniatura do youtube parece pixelizada.

Minha solução com dois invólucros funciona como um encanto para mim:

.videoWrapperOuter {
  max-width:640px; 
  margin-left:auto;
  margin-right:auto;
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="videoWrapperOuter">
  <div class="videoWrapperInner">
    <iframe src="//www.youtube.com/embed/C6-TWRn0k4I" 
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

Também ajustei o fundo do preenchimento no invólucro interno para 50%, porque nos 56% de @ magi182, uma barra preta na parte superior e inferior apareceu.

Pascal Klein
fonte
Isso funcionou melhor para mim tentando incorporar um vídeo responsivo, mas especifique uma largura (a largura máxima).
usar o seguinte código
1

Com créditos para resposta anterior https://stackoverflow.com/a/36549068/7149454

Compatível com o Boostrap, ajuste a largura do seu contêiner (300px neste exemplo) e pronto:

<div class="embed-responsive embed-responsive-16by9" style="height: 100 %; width: 300px; ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LbLB0K-mXMU?start=1841" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"></iframe>
</div>
Nick Kovalsky
fonte
0

Veja a lista completa aqui e o exemplo ao vivo aqui .

#hero { width:100%;height:100%;background:url('{$img_ps_dir}cms/how-it-works/hero.jpg') no-repeat top center; }
.videoWrapper { position:relative;padding-bottom:56.25%;padding-top:25px;max-width:100%; }

<div id="hero">
    <div class="container">
        <div class="row-fluid">
            <script src="https://www.youtube.com/iframe_api"></script>
            <center>
            <div class="videoWrapper">
                 <div id="player"></div>
            </div>
            </center>
            <script>
            function onYouTubeIframeAPIReady() { 
                player = new YT.Player('player', {
                   videoId:'xxxxxxxxxxx',playerVars: {  controls:0,autoplay:0,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,theme:'light' }
                } );
                resizeHeroVideo();
             }
             </script>
        </div>
    </div>
</div>

var player = null;
$( document ).ready(function() {
    resizeHeroVideo();
} );

$(window).resize(function() {
    resizeHeroVideo();
});

function resizeHeroVideo() {
    var content = $('#hero');
    var contentH = viewportSize.getHeight();
    contentH -= 158;
    content.css('height',contentH);

    if(player != null) {
        var iframe = $('.videoWrapper iframe');
        var iframeH = contentH - 150;
        if (isMobile) {
            iframeH = 163; 
        }
        iframe.css('height',iframeH);
        var iframeW = iframeH/9 * 16;
        iframe.css('width',iframeW);
    }
}

O resizeHeroVideo é chamado somente depois que o player do YouTube está totalmente carregado (o carregamento da página não funciona) e sempre que a janela do navegador é redimensionada. Quando executado, calcula a altura e a largura do iframe e atribui os valores apropriados mantendo a proporção correta. Isso funciona se a janela é redimensionada horizontalmente ou verticalmente.

davidcondrey
fonte
-1

Ok, parece com grandes soluções.

Por que não adicionar width: 100%;diretamente no seu iframe. ;)

Portanto, seu código seria algo como <iframe style="width: 100%;" ...></iframe>

Tente isso, vai funcionar como funcionou no meu caso.

Aproveitar! :)

Umesh Patil
fonte
5
Porque este não redimensionar a altura correcta para o vídeo, e, portanto, mostra os controles e as faixas pretas, a resposta aceita é uma solução melhor
CᴴᵁᴮᴮʸNᴵᴺᴶᴬ
Como esse é o ponto de partida para criar vídeos responsivos com iframes incorporados, acredito que esta solução responda corretamente à pergunta. Combine isso com um sistema de grade e a altura é a única questão que resta. => (largura do recipiente / 12) * 9 = altura.
precisa saber é o seguinte
-2

Eu faço isso com css simples da seguinte maneira

CÓDIGO HTML

<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>

CÓDIGO CSS

<style type="text/css">
#vid {

max-width: 100%;
height: auto;

}


fonte