Como incorporar vídeo responsivo do YouTube no site

Colocar vídeos do YouTube em sites é comum hoje em dia. O YouTube fornece um código iframe para incorporar o vídeo em sites. No entanto, o vídeo renderizado por meio desse código iframe não responde. Isso significa que em dispositivos pequenos como celulares e tablets, seu vídeo pode não ter uma boa aparência.

Na verdade, seus vídeos incorporados do YouTube devem ser responsivos para uma melhor experiência do usuário. Neste artigo, estudamos como incorporar vídeos do YouTube responsivos em seu site.

Encontrei 3 maneiras possíveis de alcançar nosso resultado final. Vamos ver um por um.

Incorporar vídeo responsivo do YouTube usando bootstrap

Bootstrap é a ferramenta de front-end mais popular que ajuda a desenvolver sites responsivos. Ele também fornece uma solução fácil para tornar seu vídeo do YouTube responsivo.

Para começar, primeiro você precisa incluir o arquivo CSS do Bootstrap da seguinte maneira. Se você já estiver usando o Bootstrap em seu projeto, pule esta etapa.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

Em seguida, use o seguinte HTML para incorporar seu vídeo usando um Bootstrap.

<div class="container">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0"></iframe>
    </div>
</div>

Substitua o espaço reservado VIDEO_ID pelo ID do vídeo real. Experimente e você verá que seu vídeo está funcionando bem em dispositivos menores.

Você pode ler sobre esse método de incorporação na documentação do Bootstrap.

Vídeo responsivo do YouTube usando o Fancybox

Esta opção é um pouco diferente. Aqui, em vez de exibir o vídeo diretamente, exibimos uma miniatura do vídeo do YouTube. Em seguida, clicando em uma miniatura, seu vídeo começará a ser reproduzido no pop-up. Isso pode ser feito usando uma caixa extravagante.

Para usar o Fancybox, você precisa incluir os seguintes arquivos CSS e JS em seu site.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

Depois disso, coloque o código abaixo e pronto.

<a data-fancybox="" href="https://www.youtube.com/watch?v=VIDEO_ID">
    <img src="http://i3.ytimg.com/vi/VIDEO_ID/hqdefault.jpg" />
</a>

Incorporações Lite no YouTube

No primeiro método, usamos o código iframe. Ao usar um iframe, o navegador precisa baixar quase 800kB de dados para renderizar um vídeo.

Usando o fancybox, você pode reduzir essa carga. Mas, novamente, você deve incluir seu CSS e JS. Adicionar esses arquivos por meio do CDN é recomendado para liberar a carga do servidor.

Enquanto trabalhava neste tópico, encontrei um artigo que explica a incorporação de vídeos do YouTube de uma maneira diferente. Ele não precisa usar um iframe no carregamento da página nem precisa incluir nenhum arquivo.

O artigo fornece código que qualquer pessoa pode adicionar facilmente ao seu aplicativo. Siga o artigo de incorporação do YouTube Lite e adicione o código conforme sugerido.

Estas são as 3 maneiras possíveis de incorporar um vídeo do YouTube responsivo. Dependendo de seus requisitos, você pode escolher qualquer uma das soluções.

Artigos relacionados

• Como obter uma lista de vídeos do YouTube de seu canal
• Como usar a API do YouTube para enviar vídeo ao canal do YouTube
• Como obter tags de vídeo do YouTube usando a API do YouTube