Make lazyYT plugin responsive easily

Feature
1

Continuing the discussion from How to re-generate all topics?:

I had wanted to do similar, but found a simpler way of implementing what I wanted without messing with the ruby files.

Specifically this will make all embedded lazyYT Youtube videos responsive and 16:9 taking up most of the post width.

Add the following snippet to your Customize CSS section:

.lazyYT {
    height: 0 !important;
    width: 100% !important;
    padding-bottom: 56.25% !important;
}
9 Likes
2

Remember anything that makes height of posts change dynamically will eventually screw up stream positioning, depending on how many posts in the stream have this happening. Worst case every one of them, e.g. a “post cool videos” topic.

3

It doesn’t change anything dynamically, as the style is always applied and overrides whatever is set by default from lazyYT.

When I say it is responsive, is that it uses the full width of the post div.

Keep in mind that the above CSS is essentially the same CSS that is added by lazyYT when you set the aspect ratio to 16:9.

https://github.com/discourse/discourse/blob/master/plugins/lazyYT/assets/javascripts/lazyYT.js#L18-L29

It uses padding-top instead of bottom though.

4

Thanks. I’ll stick with my changes to plugin.rb for now, but I’ll keep in mind there’s another way to do it.

5

Yeah understandable. Just saw that someone else (you) wanted to do the same thing so I shared with everyone how I solved it since its easy to do.

6

Works fine, thanks @chapel :smile:

7

Thanks for that top, but I had to modify your CSS slightly:

.lazyYT {
    width: 100% !important;
    padding-bottom: 56.25% !important;
}

In my case, the lazyYT JS generated a style attribute with width: 480px and padding-bottom: 270px; stylhes, but no height.

1 Like
8

Ah, so I had to update that as well but forgot to update this. Will update the OP.

9

This is great, thanks!

@techAPJ may be worth integrating these few lines of CSS into the plugin, seems like a really nice improvement for YouTube embeds.