Isenção de responsabilidade de tradução: esse conteúdo foi traduzido para sua conveniência com o uso de software e pode não ter sido revisado por uma pessoa. O texto oficial é a versão em inglês e sempre será o texto mais atualizado. Para ver a versão em inglês, clique aqui.
CMS-Pages-Editor

Tornar seu vídeo do YouTube responsivo

Ultima atualização: Dezembro 19, 2018

Disponível para

Marketing Hub  Professional, Enterprise
Basic

Para tornar um vídeo de YouTube responsivo, adicione o seguinte código CSS à folha de estilos aplicado ao seu site:

 /*YouTube responsivo CSS para HubSpot */ 

hs-responsive-embed {
posição: Relativo;
altura: 0;
excesso de fluxo: escondido;
padding-top: 0;
padding-left: 0;
padding-right: 0;
}


.hs-responsive-embed iframe,
.hs-responsive-embed object,
.hs-responsive-embed embed {
posição: absoluta;
top: 0;
esquerda: 0;
largura: 100%;
altura: 100%;
fronteira: 0;
}


.hs-responsive-embed,
.hs-responsive-embed.hs-responsive-embed-youtube,
.hs-responsive-embed.hs-responsive-embed-wistia,
.hs-responsive-embed.hs-responsive-embed-vimeo {
padding-bottom: 56.25%;
}

Este código CSS será aplicado aos vídeos do YouTube adicionados à função de mídia de integração de editor de conteúdo.

  • Após adicionar o código CSS, copie a URL de compartilhamento do vídeo do YouTube para incorporar.
  • Navegue até seu blog, landing pages ou páginas do site.
  • Passe o ponteiro do mouse sobre uma página ou publicação e clique em Editar.
  • Localize um módulo de rich text. Clique no módulo e clique em Inserir > Incorporar.
editor-text-text
Inserir mídia
  • Cole a URL de compartilhamento do vídeo do YouTube no campo URL e clique em OK.
embed-url
Cole URL de vídeo

Quaisquer vídeos do YouTube que você adicionar através dessas etapas será responsivo.

Observe: se selecionar a opção Código em vez disso, você deve envolver o código incorporado com .hs-responsive-embed-youtube class (ex.,<div class="hs-responsive-embed-youtube"></div>).