O WordPress facilita a criação de páginas envolventes e multimídia, incorporando automaticamente conteúdo de terceiros como vídeos do YouTube e Tweets.
No entanto, após trabalhar em estreita colaboração com usuários do WordPress nos últimos 15 anos, uma lição que aprendemos é que os oEmbeds também podem causar problemas. Imagine um vídeo do YouTube transbordando seu contêiner e empurrando todo o seu texto para o lado, ou forçando seu botão de call to action para mais para baixo na tela.
É aí que definir uma largura máxima para oEmbeds entra em jogo. Isso permite que você assuma o controle e garanta que seu conteúdo incorporado se ajuste perfeitamente ao design do seu site.
Neste artigo, mostraremos como definir a largura máxima de oEmbed no WordPress para que você tenha controle total sobre o layout do seu site.
Por que Corrigir a Largura Máxima de OEmbed no WordPress?
O WordPress suporta oEmbed, que permite incorporar automaticamente conteúdo de sites de terceiros. Por exemplo, você pode facilmente incorporar vídeos do YouTube, apresentações do SlideShare, tweets e muitos outros tipos de conteúdo.
Este conteúdo não está hospedado em seu servidor, portanto, não diminuirá a velocidade do seu site. Em particular, você deve sempre usar tecnologias como o oEmbed e nunca fazer upload de um vídeo para o WordPress.
Observação: Embora o Facebook e o Instagram tenham suportado oEmbed no passado, a Meta removeu o suporte ao oEmbed. Para obter instruções passo a passo sobre como corrigir esse recurso, consulte nosso guia sobre como corrigir o problema de oEmbed do Facebook e Instagram no WordPress.
O WordPress sempre tentará ajustar a largura do conteúdo incorporado para que ele se encaixe perfeitamente no espaço disponível. No entanto, às vezes, o conteúdo incorporado pode ser muito largo e sobrepor outras áreas de conteúdo do seu site.
Infelizmente, você não pode definir uma largura máxima para incorporações de terceiros usando as ferramentas integradas do WordPress.
Dito isso, vamos ver como você pode adicionar esse recurso ausente e definir uma largura máxima de oEmbed no WordPress. Simplesmente use os links rápidos abaixo para pular diretamente para o método que você deseja usar:
- Método 1: Usando o Shortcode de Incorporação (Melhor para Vídeos do YouTube)
- Método 2: Usando os Blocos de Incorporação Integrados do WordPress (Fácil)
- Método 3: Usando PHP Personalizado (Definir uma Largura Máxima para Todas as Incorporações)
- Método 4: Usando CSS (Definir Largura Máxima para Tipos Específicos de Incorporação)
- Dica Bônus: Como Adicionar Facilmente Seus Feeds de Mídia Social ao WordPress
Método 1: Usando o Shortcode de Incorporação (Melhor para Vídeos do YouTube)
Você pode definir uma largura máxima usando um shortcode. Este método é fácil, especialmente se você quiser definir a largura máxima apenas para um pequeno número de posts. Também descobrimos que este método funciona bem para incorporar vídeos em posts de blog do WordPress.
No entanto, o shortcode de incorporação e seus parâmetros de largura e altura não funcionam para todos os provedores oEmbed. Por exemplo, você não pode usá-lo para definir a altura e a largura de uma incorporação do Giphy no WordPress. Nesse caso, você pode tentar um dos outros métodos mencionados abaixo.
Em vez de colar o URL no editor de posts, você precisará criar um bloco de shortcode. Você pode então adicionar parâmetros de largura e altura ao código de incorporação.
Por exemplo, você simplesmente precisa envolver o seguinte em tags embed:
width="900" height="600"]https://www.youtube.com/watch?v=6LwWumPeues
Basta alterar os valores de largura e altura para atender às suas próprias necessidades e substituir o URL pelo conteúdo que você deseja incorporar.
Quando estiver satisfeito com a página, basta clicar em ‘Atualizar’ ou ‘Publicar’.
O conteúdo incorporado agora deve caber perfeitamente no espaço disponível.
Método 2: Usando os Blocos de Incorporação Integrados do WordPress (Fácil)
O editor de blocos do WordPress vem com vários blocos de incorporação para diferentes serviços oEmbed, como blocos para Twitter, transmissões ao vivo do YouTube e vídeos, e incorporações do SoundCloud.
Alguns desses blocos permitem que você altere o alinhamento da incorporação e defina o conteúdo como 'Largura ampla' ou 'Largura total'.
Se você escolher largura total, o bloco de incorporação e o conteúdo incorporado ocuparão toda a largura da tela. Se você escolher largura ampla, o bloco de incorporação ocupará toda a largura, mas o conteúdo permanecerá do mesmo tamanho.
O resultado final pode variar dependendo do seu tema WordPress. No entanto, este é um método rápido e fácil, então vale a pena ver se funciona para o seu site WordPress.
Simplesmente clique no botão 'Alinhar' na pequena barra de ferramentas acima do bloco. Em seguida, selecione 'Largura ampla' ou 'Largura total'.
Se isso resolver o problema da largura máxima para a incorporação, você pode prosseguir e publicar a página. Se você não estiver satisfeito com a aparência, precisará tentar um método diferente.
Método 3: Usando PHP Personalizado (Definir uma Largura Máxima para Todas as Incorporações)
Às vezes, você pode querer definir uma largura máxima para todo o conteúdo incorporado. A maneira mais fácil de fazer isso é adicionando código personalizado ao seu site WordPress.
O problema com este método é que o atributo de largura máxima só funcionará se o conteúdo incorporado ainda não tiver uma 'largura' definida. Se o código de incorporação já incluir seu próprio atributo 'width', este método pode não funcionar.
Se você ainda não editou o código do seu site antes, dê uma olhada em nosso guia sobre como adicionar facilmente trechos de código personalizados no WordPress.
Alguns guias pedem para você editar os arquivos do tema manualmente, mas isso pode causar todos os tipos de erros e até mesmo quebrar completamente seu site.
Por esse motivo, recomendamos o uso do WPCode. Ele facilita a adição de trechos de código no WordPress sem a necessidade de editar os arquivos do seu tema. Dessa forma, você pode atualizar ou alterar seu tema sem perder todas as suas funções de código personalizadas.
O WPCode também vem com uma biblioteca de trechos de código pré-configurados, que inclui um trecho de ‘Definir Largura Máxima de oEmbed’. Isso permite que você especifique uma largura e altura máximas para seus oEmbeds.
Primeiro, você precisará instalar e ativar o plugin gratuito WPCode. Para mais informações, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, navegue até Trechos de Código » Biblioteca no seu painel de administração do WordPress.
Aqui, você pode pesquisar por ‘Definir Largura Máxima de oEmbed’ e passar o mouse sobre o resultado com o mesmo nome.
Você pode então clicar em ‘Usar Trecho’.
O WPCode o levará para a página ‘Editar Trecho’, onde o plugin já configurou tudo para você.
Aqui, você notará o seguinte trecho de código pronto:
function wpcode_snippet_oembed_defaults( $sizes ) {
return array(
'width' => 400,
'height' => 280,
);
}
add_filter( 'embed_defaults', 'wpcode_snippet_oembed_defaults' );
Por padrão, isso define a largura máxima para ‘400’ e a altura máxima para ‘280’. Não se esqueça de ajustar os atributos de altura e largura para atender às suas necessidades.
Por fim, clique no controle deslizante ‘Inativo’ para que ele mostre ‘Ativo’. Em seguida, basta clicar no botão ‘Salvar Snippet’ ou ‘Atualizar’ para tornar o snippet de código ativo.
Método 4: Usando CSS (Definir Largura Máxima para Tipos Específicos de Incorporação)
Por padrão, o WordPress adiciona automaticamente classes CSS a diferentes áreas do seu site.
Ele também adiciona várias classes CSS para incorporar blocos. Você pode usar essas classes CSS para definir uma largura máxima para incorporações em seu blog WordPress.
Esta é uma boa opção se você quiser definir um tamanho máximo para um tipo específico de incorporação, como Tweets incorporados. Ele também permite que você crie um tamanho máximo para todo o conteúdo incorporado, independentemente do tipo.
Para descobrir quais classes CSS você precisa segmentar, basta incorporar conteúdo em uma postagem ou página e, em seguida, visualizá-la em seu navegador.
Em seguida, passe o mouse sobre o conteúdo incorporado e clique com o botão direito. No menu que aparece, selecione a ferramenta ‘Inspecionar’.
Isso abre um novo painel mostrando todas as classes CSS que o WordPress adicionou ao conteúdo incorporado. Você pode usar essas classes para definir uma largura máxima para esse tipo de incorporação.
Para segmentar um provedor de oEmbed específico, você normalmente usará .wp-block-embed-providername, portanto, procure essa classe no painel.
Por exemplo, na imagem a seguir, sublinhamos a classe .wp-block-embed-providername . Nesta linha, também podemos ver uma classe .wp-block-embed-pinterest.
Você pode definir uma largura máxima apenas para incorporações do Pinterest usando a classe .wp-block-embed-pinterest.
Por exemplo:
.wp-block-embed-pinterest {
max-width: 900px!important;
}
Apenas esteja ciente de que pode ser necessário substituir .wp-block-embed-pinterest por uma classe CSS diferente, dependendo do conteúdo que você deseja segmentar.
Se você quiser definir uma largura máxima para todas as incorporações, poderá usar o seguinte trecho:
.wp-block-embed {
max-width: 900px!important;
}
A maneira mais fácil de adicionar CSS personalizado ao seu site é usando o WPCode. Simplesmente crie um novo trecho personalizado seguindo o mesmo processo descrito acima.
No entanto, desta vez, abra o menu suspenso ‘Tipo de Código’ e selecione ‘Trecho CSS’.
Agora você pode salvar e publicar este trecho exatamente da mesma maneira que você torna qualquer trecho do WPCode ativo.
Com isso feito, o WordPress usará esse valor como o tamanho máximo para suas incorporações.
Dica Bônus: Como Adicionar Facilmente Seus Feeds de Mídia Social ao WordPress
Se você incorpora regularmente conteúdo de plataformas de mídia social, pode economizar muito tempo e esforço usando Smash Balloon.
Smash Balloon é o melhor plugin de mídia social para WordPress e permite que você adicione facilmente seus feeds de mídia social a um site WordPress.
Ele suporta todos os embeds populares de mídia social, incluindo YouTube, Twitter, Instagram e vídeos do TikTok.
Mais importante ainda, o Smash Balloon é responsivo para dispositivos móveis e funciona com qualquer tema WordPress, então seu conteúdo incorporado sempre ficará ótimo.
Esperamos que este artigo tenha ajudado você a aprender como definir uma largura máxima de oEmbed no WordPress. Você também pode querer ver nosso guia sobre como incorporar facilmente código iFrame no WordPress, ou nossa comparação especializada do melhor software de chat ao vivo para pequenas empresas.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Andreu
O problema disso é que ele também limita a largura máxima das imagens ao tamanho definido. O que posso fazer se quiser limitar a largura do embed no editor, mas não a da imagem? Obrigado
Joe Daniel
Obrigado. Tenho lutado com isso por semanas… funciona para WP 4.0 com o tema Genesis
digg
Olá, funciona perfeitamente para mim.
Mas isso afeta o site como um todo, que tem larguras diferentes, pois existem páginas de largura total, com barras laterais, ou fóruns, etc.
É possível discriminar isso para afetar apenas as páginas do fórum bbpress?
Será muito útil, obrigado!
Ajit Kumar
Para quem não conseguir fazer isso funcionar ou se vídeos do Youtube e outros conteúdos iframe não estiverem redimensionando, você precisará adicionar o seguinte código ao seu style.css
/* Garante que embeds e iframes caibam em seus contêineres */
embed,
iframe,
object {
max-width: 100%;
}
Espero que ajude. E Syed, obrigado pela ótima postagem!
Waymond
Obrigado por postar a solução!
Abhishek Sachan
não está funcionando
Dj
OBRIGADO! Isso estava me deixando louco.
Anto (@imanto)
Você não pode usar iframe, object, embed { max-width: 100%; height:auto;} sim, ele corrige a largura e torna o vídeo responsivo, mas não corrige a altura ao visualizar no navegador.
Existe realmente uma maneira de fazer isso? Já tentei quase tudo, nem mesmo o fitvids funciona porque você está definindo uma largura base em px nas funções, mas ele mostra essa largura no celular, então quando você tenta corrigir isso com max-width, a altura dá problema mesmo no navegador…
estou pensando em media queries ou algo assim? ugh, estou exausto.
Amir
Funciona perfeitamente, muito obrigado!
Pierre Dickinson
Olá, obrigado pela dica, mas não funciona, eis o que você precisa no seu arquivo function.php:
add_filter(’embed_defaults’,’yourthemename_embed_defaults’);
function yourthemename_embed_defaults($defaults) {
$defaults[‘width’]=600; // ou o que você quiser
$defaults[‘height’]=360; // ou o que você quiser
return $defaults;
}
funciona muito bem!
Atenciosamente,
Filip Kojic
Este código não funciona bem. Coloquei o nome do meu tema e o tema apenas bloqueia.
Valerie
Não tenho certeza se o outro comentarista percebeu, mas o código tem aspas curvas e quebraria um site. Vou testar aqui para ver se os wrappers de shortcode impedirão a alteração que quebrou o código…
add_filter('embed_defaults','yourthemename_embed_defaults');John Cronin
Estou tentando postar um filme de animação de ponta do YouTube no meu blog WordPress. A parte inferior do quadro está cortada na pré-visualização. Depois que a seta de reprodução é clicada, esse problema desaparece. Mas o cineasta está legitimamente infeliz que a pré-visualização na postagem dará a aparência de um erro. Ajustar a altura e a largura no código da postagem funciona, mas não resolve o problema. Ideias?
Colin
Funcionou como um encanto – obrigado!
Ryan Silver
Olá,
Usei sua solução para a largura e funcionou muito bem. Mas como defino a altura agora? É apenas o mesmo if ( ! isset( $content_width ) ) $content_width = 560; mas com a palavra ‘width’ substituída pela palavra ‘height’? Tentei isso e não funcionou….
Equipe Editorial
A altura é determinada automaticamente para corresponder à proporção 16:9.
Admin
FIlip Kojic
Parece que é 16:10. Aqui está um exemplo:
How can I change height. Please someone answer.
Jasmine Ham
Ótimo, está funcionando! Mas e se eu precisar que seja responsivo?
Alguma ideia de como fazer isso?
josef
Olá,
existe uma maneira de forçar todos os iframes do site a terem 100% de largura. não apenas o youtube
tenho cerca de 300 iframes e todos com tamanho fixo, então… obrigado desde já
Josef
josef
Olá,
existe uma maneira de forçar todos os iframes do site a terem 100% de largura. não apenas o youtube
tenho cerca de 300 iframes e todos com tamanho fixo, então…
Ryan
Adicionei este código ao meu functions.php, mas não fez diferença, e presumo que seja porque meu tema não define $content_width.
Vejo o link para o codex sobre como defini-lo, mas não sou um desenvolvedor e não tenho um de plantão; como se adiciona uma definição de $content_width a um tema? Onde vai? Obrigado!
Justin Germino
Isso funcionou perfeitamente, há alguma maneira de forçar e definir o vídeo para qualidade HD em vez de qualidade SD, que parece ser o padrão, mesmo que nas minhas configurações do YouTube eu o tenha definido para padrão HD?
Equipe Editorial
Qual é a sua largura máxima? Eu li no passado que o Youtube ajusta a qualidade com base na largura do iframe.
Admin
Grant Norwood
Observe que a variável $content_width deve ser declarada como global antes que esta correção funcione.
Nigel Parry
O WP parece ser atualizado por pessoas que não entendem a centralidade da multimídia na Internet. Não sei por que essa preferência básica exigiria intervenção no código. O WP claramente não conseguia saber a largura das minhas colunas. De qualquer forma, tudo resolvido agora. Vocês são demais.
Equipe Editorial
Bem, Nigel, há mais do que isso. Eles estão tentando tornar o WordPress mais fácil de usar para os “usuários”. Com o tempo, o WordPress adicionou uma opção após a outra. Isso se torna realmente assustador para novos usuários. É por isso que eles estão seguindo a rota de decisões em vez de opções. A esperança com essa largura máxima oEmbed é que cada designer de tema deva/irá defini-la em seus temas, para que o usuário final não precise se preocupar com isso.
Admin
Alex Leonard
Obrigado! Fiquei um pouco confuso sobre onde a configuração de incorporação de mídia tinha ido!
Azad
Olá
Obrigado pela sua postagem.
Mas não consigo fazer isso funcionar, escrevi o outro post que você mencionou nos comentários. Mas ainda não consigo fazer funcionar, coloquei isto:
No início do meu functions.php, mas então todo o meu site parou de funcionar. tudo ficou branco, tive que editar o arquivo via ftp para fazê-lo funcionar novamente.
O que estou fazendo de errado?
Obrigado!
Azad
Hey
I got it working, thanks!
Monica
Olá, onde no arquivo functions.php este código deve ser colocado?
Equipe Editorial
Você pode colar no início ou no final, desde que seja independente de outras funções. Aqui está um artigo sobre isso:
https://014.leahstevensyj.workers.dev/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Admin
Jesse Garnier
Que valor seria apropriado para $content_width para um design de largura variável ou responsivo?
Equipe Editorial
Para design responsivo, você provavelmente vai querer usar fitvid.js ou algo semelhante para redimensionar seus vídeos.
Admin
Paul Lumsdaine
Consegui fazer a responsividade funcionar mais ou menos definindo uma max-width: 100% nos meus iframes em CSS. Claro que a altura é definida automaticamente dependendo da largura do seu conteúdo, mas isso pelo menos deve fazê-lo funcionar corretamente sem usar nenhum JS extra. Fitvid é o caminho a seguir, mas isso funcionou para mim.
Jeremy Myers
Paul,
Você pode incluir o CSS que usou para definir a largura do seu iframe para 100%?
Roman
Eu uso este código CSS para design responsivo:
iframe, object, embed { max-width: 100%; } (se você quiser, pode adicionar -> height: auto)
Tevya
Infelizmente o CSS do Roman ou não funciona em alguns temas ou não funciona com o novo player de mídia do WP 3.6 que está integrado ao core. Eu acabei de tentar e nada. Estou tentando conseguir um tema que seja responsivo para manter o novo player do WP 3.6 responsivo também, mas sem sorte até agora. O tema 2012 parece lidar com isso muito bem, mas não consigo descobrir o que eles estão fazendo de diferente deste tema com o qual estou trabalhando.
Melanie
Sou um novato em WP e codificação, com isso dito, não tenho certeza onde colocar o código “if ( ! isset( $content_width ) ) $content_width = 600;”. Fui ao arquivo function.php no meu tema Suffusion e não tenho certeza de onde exatamente inserir este código. Tentei em vários lugares onde mencionava anexo de vídeo e não está funcionando. No meu caso, os vídeos incorporados estão agora muito grandes para o meu tema desde a atualização para o WP 3.5.
Equipe Editorial
Altere o número 600 para corresponder ao tamanho do seu tema. Se for muito grande para o seu tema, diminua-o.
Admin
Jessi Linh
Foi lançado na hora certa!!! O nome “Elvin” é tão especial também.
Obrigado pela sua postagem.
Edward Caissie
Esta é parte da razão pela qual definir um valor apropriado de $content_width é um requisito sob as diretrizes de Revisão de Temas do WordPress (http://codex.wordpress.org/Theme_Review#Required_Hooks_and_Navigation)
Equipe Editorial
Sim, concordo totalmente com você. Apenas temas mal codificados não terão isso. Mas existem muitos deles por aí. Um tema que um de nossos clientes estava usando não tinha essa parte. No geral, é um bom tema.
Admin
Devin
Perfeito timing. Obrigado!