Remove inline fixed widths

[AlecRust]

I noticed some issues with the responsive behaviour of my post pages after installing this plugin. Note scrollbars:

Kapture.2021-01-17.at.11.14.16.mp4

This issue is not present if no WP YouTube Lyte embeds on the page. Inspecting the HTML I can see a fixed pixel width of 640px is added inline, twice:

Disabling these two inline widths like my screenshot seems to have no effect on the responsive behaviour of the thumbnail, but does fix the responsive behaviour of my theme:

Kapture.2021-01-23.at.13.33.02.mp4

Can these two fixed inline widths be removed? Or set to max-width instead perhaps (I understand you support different player sizes).

[futtta]

• can you try setting the player width on the LYTE settings page to the maximum size and see if that fixes things?
• if not, alternatively this is something that I suspect should be fixable with a little bit of CSS, I would be happy to try to help (but would need to be able to see the page "broken".

[AlecRust]

Thanks for your reply @futtta. The URLs in my videos are public, so here's a live example.

I've tried both "Maxi" player sizes but they add the same inline pixel widths to the player which breaks the layout (screenshot).

In terms of CSS, I can fix it with the following:

/* Override WP YouTube Lyte inline styles */
.lyte-wrapper,
.lL {
  width: auto !important;
}

But !important is necessary to override your inline styles.

I wonder if instead of this:

<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube">
  <div class="lyte-wrapper" title="Video title" style="width:640px;max-width: 100%;margin:5px auto;">
    <!-- etc. -->
  </div>
  <div class="lL" style="max-width:100%;width:640px;margin:5px auto;"></div>
  <figcaption></figcaption> <!-- empty element -->
</figure>

It was something like this?

<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube">
  <div class="lyte-wrapper lyte-sizing lyte-sizing-default" title="Video title">
    <!-- etc. -->
  </div>
  <div class="lL lyte-sizing lyte-sizing-default"></div>
</figure>

.lyte-sizing {
  max-width: 100%;
  margin: 5px auto;
}

.lyte-sizing-default {
  width: 640px;
}

This would allow for easier overriding of the CSS.

[futtta]

Although I'm not against making changes in the plugin I am kind of conservative as any change can adversely impact other installations. As problems you the one you describe are rare (it's kind of a conflict with your theme) and as there is a workaround (albeit with an !important flag) I am not going to make changes at this point although I might take this under consideration for a rewrite I am contemplating (time permitting). thanks for your input! frank

…

On Sun, Jan 24, 2021 at 12:10 PM Alec Rust ***@***.***> wrote: Thanks for your reply @futtta <https://github.com/futtta>. The URLs in my videos are public, so here's a live example <https://www.saltbythesea.com/blog/asking-questions/>. I've tried both "Maxi" player sizes but they add the same inline pixel widths to the player which breaks the layout (screenshot <https://i.imgur.com/5rNiad4.png>). In terms of CSS, I can fix it with the following: /* Override WP YouTube Lyte inline styles */ .lyte-wrapper, .lL { width: auto !important; } But !important is necessary to override your inline styles. I wonder if instead of this: <figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube"> <div class="lyte-wrapper" title="Video title" style="width:640px;max-width: 100%;margin:5px auto;"> <!-- etc. --> </div> <div class="lL" style="max-width:100%;width:640px;margin:5px auto;"></div> <figcaption></figcaption> <!-- empty element --></figure> It was something like this? <figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube"> <div class="lyte-wrapper lyte-sizing lyte-sizing-default" title="Video title"> <!-- etc. --> </div> <div class="lL lyte-sizing lyte-sizing-default"></div></figure> .lyte-sizing { max-width: 100%; margin: 5px auto; } .lyte-sizing-default { width: 640px; } This would allow for easier overriding of the CSS. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#21 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABMIMJCLJF7AYGV3QBK3QLS3P53HANCNFSM4WPWANGQ> .