Remove inline fixed widths

[AlecRust]

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

https://user-images.githubusercontent.com/247634/104838822-3a937800-58b5-11eb-8c9c-0f6537c37481.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:

https://user-images.githubusercontent.com/247634/105579657-a5462700-5d7f-11eb-8150-46b6217acbfe.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 [email protected] 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:

It was something like this?

.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 https://github.com/futtta/wp-youtube-lyte/issues/21#issuecomment-766329912, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABMIMJCLJF7AYGV3QBK3QLS3P53HANCNFSM4WPWANGQ .