# Make lazyYT plugin responsive easily
**URL:** https://meta.discourse.org/t/make-lazyyt-plugin-responsive-easily/24143
**Category:** Feature
**Created:** [2015年一月18日 07:16 UTC](https://meta.discourse.org/t/make-lazyyt-plugin-responsive-easily/24143 "2015-01-18T07:16:07Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@chapel](https://meta.discourse.org/u/chapel)
#### Post date: [2015年一月18日 07:16 UTC](https://meta.discourse.org/t/make-lazyyt-plugin-responsive-easily/24143/1 "2015-01-18T07:16:07Z")
Continuing the discussion from [How to re-generate all topics?](https://meta.discourse.org/t/how-to-re-generate-all-topics/24142):
> [@iroller](#):
>
> Hi. I’ve updated lazyYT plugin with the following data:
>
> ```
> - replace:
> filename: /var/www/discourse/plugins/lazyYT/plugin.rb
> from: /data-width=\\"480\\" data-height=\\"270\\"/
> to: data-ratio=\"16:9\"
>
> ```
>
> Now I need all the topics to pick up changes (manual edit+save works fine). Is there an easy way of doing it in console?
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:
```css
.lazyYT {
height: 0 !important;
width: 100% !important;
padding-bottom: 56.25% !important;
}
```
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2015年一月18日 08:20 UTC](https://meta.discourse.org/t/make-lazyyt-plugin-responsive-easily/24143/2 "2015-01-18T08:20:05Z")
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.
---
### Author:  [@chapel](https://meta.discourse.org/u/chapel)
#### Post date: [2015年一月18日 09:02 UTC](https://meta.discourse.org/t/make-lazyyt-plugin-responsive-easily/24143/3 "2015-01-18T09:02:03Z")
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](https://github.com/discourse/discourse/blob/master/plugins/lazyYT/assets/javascripts/lazyYT.js#L18-L29)
It uses `padding-top` instead of bottom though.
---
### Author:  [@iroller](https://meta.discourse.org/u/iroller)
#### Post date: [2015年一月18日 18:13 UTC](https://meta.discourse.org/t/make-lazyyt-plugin-responsive-easily/24143/4 "2015-01-18T18:13:36Z")
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.
---
### Author:  [@chapel](https://meta.discourse.org/u/chapel)
#### Post date: [2015年一月18日 18:57 UTC](https://meta.discourse.org/t/make-lazyyt-plugin-responsive-easily/24143/5 "2015-01-18T18:57:48Z")
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.
---
### Author:  [@dbm](https://meta.discourse.org/u/dbm)
#### Post date: [2015年二月7日 17:47 UTC](https://meta.discourse.org/t/make-lazyyt-plugin-responsive-easily/24143/6 "2015-02-07T17:47:53Z")
Works fine, thanks @chapel 😄
---
### Author:  [@elberet](https://meta.discourse.org/u/elberet)
#### Post date: [2015年二月10日 19:46 UTC](https://meta.discourse.org/t/make-lazyyt-plugin-responsive-easily/24143/7 "2015-02-10T19:46:53Z")
Thanks for that top, but I had to modify your CSS slightly:
```css
.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`.
---
### Author:  [@chapel](https://meta.discourse.org/u/chapel)
#### Post date: [2015年二月10日 20:10 UTC](https://meta.discourse.org/t/make-lazyyt-plugin-responsive-easily/24143/8 "2015-02-10T20:10:31Z")
Ah, so I had to update that as well but forgot to update this. Will update the OP.
---
### Author:  [@bts](https://meta.discourse.org/u/bts)
#### Post date: [2018年二月8日 23:04 UTC](https://meta.discourse.org/t/make-lazyyt-plugin-responsive-easily/24143/9 "2018-02-08T23:04:57Z")
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.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [2025年十二月4日 11:33 UTC](https://meta.discourse.org/t/make-lazyyt-plugin-responsive-easily/24143/10 "2025-12-04T11:33:28Z")