Colocar v\u00eddeos do YouTube em sites \u00e9 comum hoje em dia. O YouTube fornece um c\u00f3digo iframe para incorporar o v\u00eddeo em sites. No entanto, o v\u00eddeo renderizado por meio desse c\u00f3digo iframe n\u00e3o responde. Isso significa que em dispositivos pequenos como celulares e tablets, seu v\u00eddeo pode n\u00e3o ter uma boa apar\u00eancia.<\/p>\n
Na verdade, seus v\u00eddeos incorporados do YouTube devem ser responsivos para uma melhor experi\u00eancia do usu\u00e1rio. Neste artigo, estudamos como incorporar v\u00eddeos do YouTube responsivos em seu site.<\/p>\n
Encontrei 3 maneiras poss\u00edveis de alcan\u00e7ar nosso resultado final. Vamos ver um por um.<\/p>\n
Bootstrap \u00e9 a ferramenta de front-end mais popular que ajuda a desenvolver sites responsivos. Ele tamb\u00e9m fornece uma solu\u00e7\u00e3o f\u00e1cil para tornar seu v\u00eddeo do YouTube responsivo.<\/p>\n
Para come\u00e7ar, primeiro voc\u00ea precisa incluir o arquivo CSS do Bootstrap da seguinte maneira. Se voc\u00ea j\u00e1 estiver usando o Bootstrap em seu projeto, pule esta etapa.<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\" \/><\/code><\/pre>\nEm seguida, use o seguinte HTML para incorporar seu v\u00eddeo usando um Bootstrap.<\/p>\n
<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"embed-responsive embed-responsive-16by9\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<iframe src=\"https:\/\/www.youtube.com\/embed\/VIDEO_ID?rel=0\"><\/iframe>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div><\/code><\/pre>\nSubstitua o espa\u00e7o reservado VIDEO_ID pelo ID do v\u00eddeo real. Experimente e voc\u00ea ver\u00e1 que seu v\u00eddeo est\u00e1 funcionando bem em dispositivos menores.<\/p>\n
Voc\u00ea pode ler sobre esse m\u00e9todo de incorpora\u00e7\u00e3o na documenta\u00e7\u00e3o do Bootstrap<\/a>.<\/p>\nV\u00eddeo responsivo do YouTube usando o Fancybox<\/h3>\n
Esta op\u00e7\u00e3o \u00e9 um pouco diferente. Aqui, em vez de exibir o v\u00eddeo diretamente, exibimos uma miniatura do v\u00eddeo do YouTube. Em seguida, clicando em uma miniatura, seu v\u00eddeo come\u00e7ar\u00e1 a ser reproduzido no pop-up. Isso pode ser feito usando uma caixa extravagante<\/a>.<\/p>\nPara usar o Fancybox, voc\u00ea precisa incluir os seguintes arquivos CSS e JS em seu site.<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/gh\/fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.css\" \/>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jquery@3.5.1\/dist\/jquery.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.js\"><\/script><\/code><\/pre>\nDepois disso, coloque o c\u00f3digo abaixo e pronto.<\/p>\n
<a data-fancybox=\"\" href=\"https:\/\/www.youtube.com\/watch?v=VIDEO_ID\">\n\u00a0\u00a0\u00a0\u00a0<img src=\"http:\/\/i3.ytimg.com\/vi\/VIDEO_ID\/hqdefault.jpg\" \/>\n<\/a><\/code><\/pre>\nIncorpora\u00e7\u00f5es Lite no YouTube<\/h3>\n
No primeiro m\u00e9todo, usamos o c\u00f3digo iframe. Ao usar um iframe, o navegador precisa baixar quase 800kB de dados para renderizar um v\u00eddeo.<\/p>\n
Usando o fancybox, voc\u00ea pode reduzir essa carga. Mas, novamente, voc\u00ea deve incluir seu CSS e JS. Adicionar esses arquivos por meio do CDN \u00e9 recomendado para liberar a carga do servidor.<\/p>\n
Enquanto trabalhava neste t\u00f3pico, encontrei um artigo que explica a incorpora\u00e7\u00e3o de v\u00eddeos do YouTube de uma maneira diferente. Ele n\u00e3o precisa usar um iframe no carregamento da p\u00e1gina nem precisa incluir nenhum arquivo.<\/p>\n
O artigo fornece c\u00f3digo que qualquer pessoa pode adicionar facilmente ao seu aplicativo. Siga o artigo de incorpora\u00e7\u00e3o do YouTube Lite<\/a> e adicione o c\u00f3digo conforme sugerido.<\/p>\nEstas s\u00e3o as 3 maneiras poss\u00edveis de incorporar um v\u00eddeo do YouTube responsivo. Dependendo de seus requisitos, voc\u00ea pode escolher qualquer uma das solu\u00e7\u00f5es.<\/p>\n
Artigos relacionados<\/h4>\n