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.
Esto es más fácil que la solución que mencionaste antes, pero sí, hacerlo individualmente para cada video puede ser un problema. Espero que puedas proporcionar una versión más sencilla de la solución mencionada anteriormente.
Si quieres que todos los videos se muestren de esta manera, te recomiendo encarecidamente no modificar la URL de los videos individuales y, en su lugar, aplicar la modificación CSS mencionada anteriormente.
Como se mencionó, simplemente ve a Admin > Personalizar > Temas y pega ese fragmento en tu CSS (sería más modular si estuviera en un componente, pero también funciona perfectamente agregarlo a tu tema principal). Solo debería tomar un minuto. No creo que haya una forma más sencilla de hacerlo.
La solución realmente “más fácil” aquí sería que Discourse lo estableciera como predeterminado. La mayoría de las incrustaciones (imágenes grandes, oneboxes, incrustaciones de código de GitHub) se muestran a ancho completo, y hacer que las incrustaciones de video se comporten de manera similar se vería mejor y sería mucho más consistente visualmente.
Sin embargo, esto se ha discutido desde 2015 y no parecen interesados en hacer ese cambio. Cabe señalar que también existe cierta preocupación sobre la discrepancia entre el ancho del video y el tamaño de la miniatura de YouTube o el ancho de banda requerido; consulta: https://meta.discourse.org/t/making-embedded-linked-video-stretch-to-the-edges-of-the-topic/87960/6. Parece que eso podría ser el principal obstáculo aquí. Aunque, como mencioné en ese tema, el compromiso parece ser prácticamente imperceptible…
Eso fue el año pasado, no estoy seguro de si el equipo de Discourse tenga nuevas ideas sobre el tamaño de YouTube. Pero sí, esto surge con bastante frecuencia y he aprendido que hacer esto como predeterminado en el núcleo de Discourse es ciertamente un problema un poco más complicado de lo que parece 
Todo eso es algo académico, pero la historia corta es que puedes pegar el fragmento anterior en literalmente unos 30 segundos y ¡tener gloriosos videos de YouTube a ancho completo en tu sitio!
Un cambio es incompatible con nuestra visión de Discourse como un sistema de discusión, no como un sistema de distribución de video.
Y sin embargo…
No creo que nadie quiera que Discourse sea un “sistema de distribución de videos”, pero si vas a permitir que los videos se compartan y discutan —algo muy importante para muchos foros, incluido el nuestro— deberían verse bien. Y sí, por “bien” me refiero a “que ocupen todo el ancho del mensaje para optimizar el espacio, igual que hacen otros incrustados de Discourse”, pero supongo que podemos estar en desacuerdo 
Si priorizas la apariencia sobre los beneficios de LazyYT (bloquea el rastreo de Google de cada usuario, ya que no carga el iframe completo; la página es más ligera por la misma razón), simplemente puedes eliminar LazyYT de la carpeta del plugin y se revertirá a los oembeds estándar:
Pasé demasiado tiempo investigando las APIs de YouTube, y para que LazyYT utilice miniaturas mejores (que puedan ajustarse a nuestro ancho de publicación de 690 px), tendríamos que pedir a cada administrador que se registre para obtener claves de la API de YouTube, implementar una lógica de retorno a las miniaturas actuales, ya que los videos antiguos de YouTube no tienen miniaturas en HD, y realmente no valía la pena el esfuerzo. Así que, si solo quieres que se vea bien, simplemente ejecuta un rm -rf plugin/lazyYT simple en el hook run de tu archivo app.yml.
Totalmente pr-welcome si alguien a quien le importa esto y quiere implementar una lógica de miniaturas mejorada para LazyYT que tenga en cuenta todos los casos:
La solución con CSS funciona perfectamente para nosotros: seguimos beneficiándonos de la carga diferida Y los videos tienen el mismo ancho que el resto de los medios. ¡Doble victoria!
Es cierto. ¿Has considerado obtener el maxresdefault.jpg? Aunque no todos los videos lo tienen, por lo que requeriría cierta inteligencia adicional en el plugin..
Esto es exactamente lo que describí aquí
Sí, estoy de acuerdo contigo. Necesitamos una versión más sencilla de la solución mencionada.
