Make lazyYT plugin responsive easily

Contribute Feature

AI-generated summary

A discussion on making the lazyYT plugin responsive easily is underway. chapel shared a CSS snippet to achieve this:

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

This code makes embedded lazyYT YouTube videos responsive and 16:9, taking up most of the post width. codinghorror warned that dynamic height changes could affect stream positioning, but chapel clarified that the style is always applied and doesn’t change dynamically.

Others have tested and confirmed the solution, with some requiring minor modifications to accommodate existing styles generated by the lazyYT JS. A suggestion was made to integrate the CSS into the plugin for a more seamless user experience.

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 Mi Piace
Youtube embed size, revisited
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 Mi Piace
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.