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.
C’est plus simple que la solution que vous avez mentionnée précédemment, mais oui, le faire individuellement pour chaque vidéo peut poser problème. J’espère que vous pourrez proposer une version plus simple de la solution susmentionnée.
Si vous souhaitez que toutes les vidéos s’affichent ainsi, je vous recommande vivement de ne pas modifier l’URL pour chaque vidéo individuellement, et d’utiliser plutôt la modification CSS mentionnée ci-dessus.
Comme indiqué précédemment, rendez-vous simplement dans Admin > Personnaliser > Thèmes et collez ce fragment dans votre CSS (c’est plus modulaire si vous le placez dans un composant, mais cela fonctionne très bien en l’ajoutant directement à votre thème principal). Cela ne devrait prendre qu’une minute. Je ne pense pas qu’il existe une méthode plus simple pour faire cela.
La véritable solution « plus facile » consisterait pour Discourse à en faire le comportement par défaut. La plupart des intégrations (grandes images, oneboxes, blocs de code GitHub) s’affichent en pleine largeur, et faire en sorte que les intégrations de vidéos se comportent de manière similaire offrirait un meilleur rendu visuel et une cohérence bien plus grande.
Cependant, cela a été discuté depuis 2015 et ils ne semblent pas enclins à effectuer ce changement. Notez également qu’il existe certaines préoccupations concernant la différence entre la largeur de la vidéo et la taille de la miniature YouTube ou la bande passante requise, voir : https://meta.discourse.org/t/making-embedded-linked-video-stretch-to-the-edges-of-the-topic/87960/6 — cela semble être le principal obstacle. Bien que, comme je l’ai mentionné dans ce sujet, le compromis semble en réalité à peine perceptible…
Cela remonte à l’année dernière, je ne sais pas si l’équipe de Discourse a de nouvelles réflexions sur la taille des vidéos YouTube. Mais oui, ce sujet revient assez souvent et j’ai appris que faire de cela le comportement par défaut dans le cœur de Discourse est certainement un problème un peu plus complexe qu’il n’y paraît 
Tout cela reste un peu théorique, mais en résumé, vous pouvez coller le fragment ci-dessus en à peine 30 secondes et bénéficier de vidéos YouTube en pleine largeur sur votre site !
Ce changement est incompatible avec notre vision de Discourse comme étant avant tout un système de discussion, et non un système de distribution vidéo.
Et pourtant…
Je ne pense pas que quiconque souhaite que Discourse devienne un « système de distribution vidéo », mais si vous allez permettre le partage et la discussion de vidéos — ce qui est très important pour de nombreux forums, le nôtre inclus — elles doivent avoir fière allure. Et oui, par « fière allure », j’entends « occuper toute la largeur du message pour optimiser l’espace, tout comme les autres embeds Discourse », mais je suppose que nous pouvons accepter de ne pas être d’accord 
Si vous privilégiez l’apparence aux avantages de LazyYT (qui bloque le suivi Google pour chaque utilisateur car il ne charge pas le iframe complet, et que la page est moins lourde pour la même raison), vous pouvez simplement supprimer LazyYT du dossier du plugin. Le système reviendra alors aux oembeds standards :
J’ai juste dû définir la largeur du iframe à 690
J’ai passé beaucoup trop de temps à étudier les API de YouTube. Pour permettre à LazyYT d’utiliser de meilleures vignettes (qui s’adapteraient à notre largeur de publication de 690 px), il faudrait demander à chaque administrateur de s’inscrire pour obtenir des clés API YouTube, implémenter une logique de basculement vers les vignettes actuelles (car les anciennes vidéos YouTube n’ont pas de vignettes HD), et cela ne valait vraiment pas la peine. Donc, si vous voulez simplement que cela ait l’air cool, exécutez simplement rm -rf plugin/lazyYT dans le hook run de votre fichier app.yml.
C’est tout à fait pr-welcome si quelqu’un qui s’intéresse à ce sujet souhaite implémenter une meilleure logique de vignettes pour LazyYT, prenant en compte tous les cas :
La solution CSS fonctionne parfaitement pour nous : nous bénéficions toujours du chargement différé ET les vidéos ont la même largeur que les autres médias. Double victoire
C’est exact. Avez-vous envisagé d’utiliser maxresdefault.jpg ? Toutes les vidéos ne l’ont pas, cependant, ce qui nécessiterait une intelligence supplémentaire dans le plugin.
C’est exactement ce que j’ai décrit ici :
Oui, je suis d’accord avec toi. Nous avons besoin d’une version plus simple de la solution mentionnée.
