I’m following up on ‘Youtube embed size’. In this topic, the discussion was about the small default size of YouTube embeds. The final solution was allowing width and height parameters in YouTube links. I’m not sure this is a great solution as most forum users will not know about these.
What’s currently the best approach to make YouTube embeds the same size as images?
Somewhat on the same topic, Vimeo embeds are larger than YouTube embeds but still not the same size as images.
This is what we have currently to make YouTube embeds span the full post width:
.lazyYT-container {
height: 0 !important;
width: 100% !important;
padding-bottom: 56.25% !important;
}
IMO this is a big improvement and something like this should just be the default styling!
Not sure how to do the same for Vimeo (but YouTube accounts for probably like 99% of videos shared on our forum so not something we’ve worried about too much…)
Brilliant, thanks!
True enough 
this looks perfect, thank you so much!
Hi there.
I am new here, hence the late reply.
My YouTube videos look small and have a black border, and I don’t know how to change the width and remove the border. I have read your response, but don’t understand what to do. I was wondering if you could explain it to someone who has no clue about this type of thing.
Here is a screenshot
What I posted is custom CSS, which you can add by going to Admin > Customize, and then adding that to a theme or theme component by clicking “Edit CSS/HTML” and pasting into the Common > CSS section.
If you don’t already have a custom theme, I think you can either add the CSS directly to your default theme, or make a new theme component, add the CSS there, and then make sure that component is added to the main theme.
This may sound confusing if you’re not yet familiar with Discourse themes / customization at all. Give this a read for more detail and it should start to make sense how it all works! —
Hi Brendan,
That’s a lot of complicated reading.
Isn’t there a straight forward…go to YouTube, click on ‘x’ change ‘y’ and hey presto?
That guide is just background reading if you get lost, but you should basically be able to just copy-paste that code to your theme and have it work.
You may be able to pass the width/height params as part of the YouTube URL (as per this post), but this customization is currently needed to change the default way Discourse displays YouTube videos.
I do agree Discourse could handle this better by default though so this customization isn’t needed! @Johani would you consider making this the default for video embeds? Would make for more consistent design (e.g. I believe oneboxes, large images, etc. always display full-width…)
I am still unsure how to adjust the height and width of an individual post. I can see that it should be 690 & 400, but my link (for an unlisted YouTube video) doesn’t contain height or width like it does in the example you sent me.
Hmmm just tested and it looks like that method still works? You just append &width=690&height=400 to the first part of the URL e.g. https://www.youtube.com/watch?v=4CJvasYJP6o
But yeah you’d have to do this for every single video so the method above is definitely better to have consistent video display for the whole forum e.g. if any other users besides yourself may be posting video links.
Isso é mais fácil do que a solução que você mencionou antes, mas sim, fazer isso individualmente para cada vídeo pode ser um problema. Espero que você possa fornecer uma versão mais simples da solução mencionada acima.
Se você deseja que todos os vídeos sejam exibidos dessa maneira, recomendo fortemente não ajustar a URL para vídeos individuais e, em vez disso, usar a modificação CSS acima.
Como mencionado anteriormente, basta ir em Admin > Personalizar > Temas e colar esse trecho no seu CSS (é mais modular se estiver em um componente, mas funciona bem adicionando ao seu tema principal também). Deve levar apenas um minuto. Não acho que haja uma maneira mais simples de fazer isso.
A verdadeira solução “mais fácil” aqui seria que o Discourse tornasse isso o padrão. A maioria dos incorporamentos (imagens grandes, oneboxes, incorporamentos de código do GitHub) exibe largura total, e fazer os incorporamentos de vídeo se comportarem de forma semelhante ficaria melhor + seria muito mais visualmente consistente.
No entanto, isso tem sido discutido desde 2015 e eles não parecem interessados em fazer essa alteração. Note que também há alguma preocupação sobre a incompatibilidade entre a largura do vídeo e o tamanho da miniatura do YouTube / largura de banda necessária, veja: https://meta.discourse.org/t/making-embedded-linked-video-stretch-to-the-edges-of-the-topic/87960/6 — parece que isso pode ser o principal obstáculo aqui. Embora, como mencionei naquele tópico, a compensação pareça basicamente imperceptível…
Isso foi no ano passado, não tenho certeza se a equipe do Discourse tem novas ideias sobre o tamanho do YouTube. Mas sim, isso surge com bastante frequência e aprendi que tornar isso o padrão no núcleo do Discourse é certamente um problema um pouco mais complicado do que parece
Tudo isso é meio acadêmico, porém. A versão curta é que você pode colar o trecho acima em literalmente 30 segundos e ter vídeos gloriosos do YouTube em largura total no seu site!
Uma mudança é incompatível com nossa visão do Discourse como primariamente um sistema de discussão, não um sistema de distribuição de vídeo.
E, no entanto…
Não acho que alguém queira que o Discourse seja um “sistema de distribuição de vídeo”, mas se você vai permitir que vídeos sejam compartilhados e discutidos — algo muito importante para muitos fóruns, inclusive o nosso — eles devem ficar bons. E sim, por “bons” quero dizer “ocupando a largura total da postagem para otimizar o espaço, assim como outros embeds do Discourse”. Mas acho que podemos concordar em discordar 
Se você priorizar a aparência em vez dos benefícios do LazyYT (que bloqueia o rastreamento do Google em cada usuário, pois não carrega o iframe completo, e a página fica mais leve pelo mesmo motivo), você pode simplesmente excluir o LazyYT da pasta do plugin e ele voltará aos oembeds padrão:
Apenas precisei definir a largura do iframe para 690
Gastei muito tempo pesquisando as APIs do YouTube, e para fazer o LazyYT usar miniaturas melhores (que se encaixem na nossa largura de postagem de 690px), teríamos que pedir que cada administrador se registrasse para obter chaves de API do YouTube, implementar uma lógica de fallback para as miniaturas atuais, já que vídeos antigos do YouTube não possuem miniaturas em HD, e isso realmente não valia o esforço. Então, se você apenas quer que fique com uma aparência legal, basta executar um simples rm -rf plugin/lazyYT no hook run do seu app.yml.
Totalmente pr-welcome se alguém que se importa com isso quiser implementar uma lógica de miniaturas melhor para o LazyYT, que leve em conta todos os casos:
A solução CSS funciona bem para nós — ainda nos beneficiamos do carregamento sob demanda E os vídeos têm a mesma largura que outros meios de comunicação. Dupla vitória
Verdade mesmo. Você já pensou em pegar o maxresdefault.jpg? Nem todos os vídeos têm esse arquivo, no entanto, então seria necessária alguma inteligência adicional no plugin..
É exatamente isso que descrevi aqui
Sim, eu concordo com você. Precisamos de uma versão mais fácil da solução mencionada.
