Making embedded (linked) video stretch to the edges of the topic


(Blu McCormick) #1

Hey everyone,

So here is today’s topic I’m disseminating locally:

I’d like to make the two self-made youtube videos (which are embedded in the topic by simply adding a link) stretch to fit the width of the topic just like the oneboxed links and photos do.

Is that possible?


(Joe) #2

Hey Blu,

This should work:

I checked and it does the job well.


(Blu McCormick) #3

Thank you so much, Joe! The topic looks way better now.


(Brendan Schlagel) #4

Great! Any reason to not just make this the default?


(Jeff Atwood) #5

Bandwidth, also it’s kind of obnoxious to have enormous H x W videos in the context of discussion.


(Brendan Schlagel) #6

Hmm couple quick replies to those points:

  • Large images already default to full width of posts (for example above screenshot in this very topic) and I don’t find it enormous, I believe 690px max width. Makes sense to me to have videos & images consistent in this respect.

  • Just tested on our forum where we do have this CSS to make videos display full width, and Youtube seems to still default to 480p, so doesn’t appear it would = any bandwidth increase


(Joe) #7

Youtube will remember your quality preferences across websites but will “default” to a setting that compliments the player size if no such preference is set.

However, that’s not the only concern bandwidth-wise. There’s also the thumbnails. Youtube generates different thumbnail sizes for videos.

mqdefault.jpg = 320px wide
hqdefault.jpg = 480px wide
maxresdefault.jpg = the actual size of the uploaded thumbnail.

Embedded Youtube videos in Discourse are 480px wide and the thumbnails are hqdefault.jpg which again are 480px So this works well.

Now, if you use CSS to make the embedded player 690px or the full width of the post, you will “stretch” the hqdefault.jpg thumbnail to the width of the player or 690px

Once the video starts playing this is no longer an issue but before playing the video you will have a slightly blurry thumbnail displayed due to the size difference.

So what then? Well, you could request the maxresdefault.jpg thumbnail for the videos. Here’s where it gets tricky.

The difference between hqdefault.jpg and maxresdefault.jpg can be pretty significant. While it’s not an exact science, expect something along the lines of x5 or even x10 the size of each thumbnail.

You can test this yourself.


(Brendan Schlagel) #8

Ah interesting! Thanks for the extra detail here. So no generated thumbnail between 480px and max size, huh. Just tested for a bunch of our videos, I’m seeing ‘hqdefault’ ones are ~ 20-30kb and ‘maxresdefault’ ones are ~ 100-160kb so that 5x factor sounds about right.

Anecdotally…we’ve had ours set to the full 690px for a while (dozens, probably hundreds of videos posted here) and I hadn’t yet noticed the slight quality loss from upsizing the 480px thumbnails.

Even the ‘maxresdefault’ images don’t seem crazy large though. As comparison, the 690px version of the above embedded screenshot is very similar in size (132kb). So I’d think an edge case e.g. where you have tons of videos in one post would have similar performance concerns to the same thing but with images.

IMO given how much better the full width videos look, and the greater consistency with how embedded images display, I think either tradeoff (slightly lower quality or larger thumbnails) would prob be fine. But good to know it’s more complicated than it might seem!