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.
È più semplice della soluzione che hai menzionato prima, ma sì, farlo individualmente per ogni video può essere un problema. Spero tu possa fornire una versione più semplice della soluzione sopra menzionata.
Se vuoi che tutti i video si visualizzino in questo modo, ti consiglio vivamente di non modificare l’URL per i singoli video e di utilizzare invece la modifica CSS riportata sopra.
Come accennato, vai semplicemente su Admin > Personalizza > Temi e incolla quel frammento nel tuo CSS (è più modulare se inserito in un componente, ma funziona bene anche aggiunto al tuo tema principale). Dovrebbe richiedere solo un minuto. Non credo esista un modo più semplice per farlo.
La vera soluzione “più facile” qui sarebbe che Discourse lo rendesse il comportamento predefinito. La maggior parte degli embed (immagini grandi, onebox, embed di codice GitHub) si visualizza a larghezza intera e renderebbe gli embed video comportarsi in modo simile, migliorando l’aspetto e garantendo una coerenza visiva molto maggiore.
Tuttavia, questo è stato discusso dal 2015 e non sembrano intenzionati a apportare tale modifica. Si noti inoltre che esiste una certa preoccupazione riguardo alla discrepanza tra la larghezza del video e le dimensioni della miniatura di YouTube / la larghezza di banda richiesta, vedi: https://meta.discourse.org/t/making-embedded-linked-video-stretch-to-the-edges-of-the-topic/87960/6 — sembra che questo possa essere il principale ostacolo. Come ho menzionato in quel topic, il compromesso sembra praticamente impercettibile…
Questo era l’anno scorso, non sono sicuro che il team di Discourse abbia nuove idee sulla dimensione di YouTube. Ma sì, questo problema si presenta abbastanza spesso e ho imparato che renderlo predefinito nel core di Discourse è certamente un problema un po’ più complesso di quanto sembri 
Tutto questo è in fondo accademico, la breve storia è che puoi incollare il frammento sopra in letteralmente circa 30 secondi e avere splendidi video YouTube a larghezza intera sul tuo sito!
Una modifica è incompatibile con la nostra visione di Discourse come sistema principalmente di discussione, non di distribuzione video.
Eppure…
Non credo che qualcuno voglia che Discourse diventi un “sistema di distribuzione video”, ma se si intende permettere la condivisione e la discussione di video — aspetto molto importante per molti forum, incluso il nostro — questi dovrebbero essere presentati in modo efficace. E sì, per “efficace” intendo “che occupi l’intera larghezza del post per ottimizzare lo spazio, proprio come fanno gli altri embed di Discourse”, ma immagino possiamo concordare di non essere d’accordo 
Se dai priorità all’aspetto estetico rispetto ai vantaggi di LazyYT (blocca il tracciamento di Google per ogni utente poiché non carica l’iframe completo, la pagina è meno pesante per lo stesso motivo), puoi semplicemente eliminare LazyYT dalla cartella del plugin e tornerà agli standard oembed:
Hai solo dovuto impostare la larghezza dell’iframe a 690
Ho dedicato troppo tempo alla ricerca delle API di YouTube e, per far sì che LazyYT utilizzi miniature migliori (che si adattino alla nostra larghezza dei post di 690px), dovremmo chiedere a ogni amministratore di registrarsi per ottenere le chiavi API di YouTube, implementare una logica di fallback alle miniature attuali poiché i video YouTube vecchi non hanno miniature HD, e non ne è valsa la pena. Quindi, se vuoi solo che sembri bello, esegui semplicemente rm -rf plugin/lazyYT nell’hook run del tuo file app.yml.
Assolutamente pr-welcome se qualcuno a cui interessa questo argomento e vuole implementare una logica di miniature migliore per LazyYT che tenga conto di tutti i casi:
La soluzione CSS funziona perfettamente per noi: continuiamo a beneficiare del caricamento differito E i video hanno la stessa larghezza degli altri media. Doppia vittoria
Vero. Hai pensato di recuperare maxresdefault.jpg? Non tutti i video lo hanno comunque, quindi richiederebbe un’ulteriore logica intelligente nel plugin..
È esattamente ciò che ho descritto qui
Sì, sono d’accordo con te. Abbiamo bisogno di una versione più semplice della soluzione menzionata.
