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.
This is easier than the solution you mentioned before, but yeah doing it individually for every video can be a problem. I hope you can provide with an easier version of the above-mentioned solution.
If you want all videos to display this way, I highly recommend not adjusting the URL for individual videos, and using the above CSS modification instead.
As mentioned above just go to Admin > Customize > Themes and paste that snippet into your CSS (more modular if it’s in a component, but works fine to add to your main theme too). Should only take a minute. I don’t think there’s a simpler way to do this.
The real “easier” solution here would be for Discourse to make this the default. Most embeds (large images, oneboxes, GitHub code embeds) display full-width and making video embeds behave similarly would look better + be a lot more visually consistent.
However this has been discussed since 2015 and they don’t seem keen to make that change. Note there is also some concern re: mismatch between video width and YouTube thumbnail size / bandwidth required, see: Making embedded (linked) video stretch to the edges of the topic — sounds like that may be the main blocker here. Though as I mentioned in that topic the tradeoff seems basically unnoticeable…
That was last year, not sure if the Discourse team may have any new thoughts on YouTube size. But yeah this comes up fairly often and I’ve learned that making this the default in Discourse core is certainly a bit trickier problem than it would seem 
All that’s kind of academic though, the short story is you can paste in the above snippet in literally like 30 seconds and have glorious full-width YouTube videos on your site!
A change is incompatible with our view of Discourse as primarily a discussion system, not a video distribution system.
And yet…
I don’t think anyone wants Discourse to be a “video distribution system”, but if you’re gonna allow videos to be shared & discussed — very important for many forums, ours included — they should look good. And yes by “good” I mean “spanning the full post width to optimize space just like other Discourse embeds do” but I guess we can agree to disagree 
If you prioritize looks over the benefits of LazyYT (blocks Google tracking every user since it doesn’t load the full iFrame, the page isn’t as heavy for the same reason) you can just delete the lazyYT from the plugin folder and it will fallback to standard oembeds:
I spent way too much time researching YouTube APIs, and in order to make LazyYT use better thumbnails (which can fit our 690px post width) we would have to ask every admin to signup for Youtube API keys, implement logic of falling back to the current thumbnails since old youtube videos doesn’t have HD thumbnails and it wasn’t really worth the effort. So if you just want it to look cool, just run a simple rm -rf plugin/lazyYT in the run hook in your app.yml.
Totally pr-welcome if someone who cares about this and want to implement a better thumbnail logic to LazyYT which accounts for all the cases:
The CSS solution works fine for us - we still benefit from the lazy loading AND videos have the same width as other media. Double win
Well, to each it’s own, IMO the thumbnails from LazyYT are unusable in larger widths due to image quality:
True enough. Have you considered getting the maxresdefault.jpg? Not all videos have this though, so it would require some additional intelligence in the plugin…
This is exactly what I described here
Yeah i agree with you.we need a easier version of the mentioned solution.
