Shotcode sizing issues

[noname-ever]

Hello.

I am trying to use your plugin. It works great where initial integration and setup is concerned. However, I am running into issues regarding "shortcode" usage for video rendering. The issue is that the video player size is unreasonable. I attach the screenshot.

Regular player looks good:

Maybe you could take a look?

[B-Interactive]

This looks like it might be theme related, and can be replicated using the more recent standard WordPress themes. Seeing as the issue is with the standard themes though, I would like to resolve it.

What theme are you using @noname-ever, so I can further test with that too?

These exhibit the issue:

• Twenty Nineteen
• Twenty Twenty
• Twenty Twenty-One
• Twenty Twenty-Two
• Twenty Twenty-Three

So far, these are themes that have not had the issue:

• Twenty Sixteen
• Twenty Seventeen
• Genesis Framework + Sample Theme
• Astra
• OceanWP
• Neve
• GeneratePress

[B-Interactive]

Ok, here's the rundown.

The Cloudflare player in this plugin is configured to the standard responsive recommendation.

<!-- padding-top calculation is height / width (assuming 16:9 aspect ratio) -->
<div class="cloudflare-stream" style="position: relative; padding-top: 56.25%">
  <iframe
    src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
    style="border: none; position: absolute; top: 0; height: 100%; width: 100%"
    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
    allowfullscreen="true"
  ></iframe>
</div>

Where this appears to fail, is in themes which do not define a max-width in any element that would be parent of the wrapping div in the above example. In testing, once a max-width is defined in a parent element, it scales to the correct size (eliminating the black bars).

Some options I've found so far:

1. Define max-width in a parent element that accurately reflects the width available to the player. How this then impacts the rest of your theme, would depend on the theme. I expect that max-width would also need to respond to the defined break points.

   .some-parent-div {
   max-width: 650px;
   }

2. Set max-width in the players div to 100%. Depending on theme, the video may scale to fit the width of the page, which I expect will not be desired at higher resolutions, but will probably be ok for smaller screens (phones).

   .cloudflare-stream {
   max-width: 100%;
   }

3. Override the responsive player, with fixed dimensions. Obviously, this will not be as responsive, and again attention would need to be paid to break points only this time, adjustments are specific to the player size.

   .cloudflare-stream {
   position: inherit;
   padding-top: inherit;
   }
   .cloudflare-stream>iframe {
   position: inherit;
   height: 366px;
   width: 650px;
   }

4. Use a different theme.

I'm open to any ideas and suggestions, but it looks to be difficult to fix this on the plugin side, because the solutions require very theme specific fixes.

[B-Interactive]

In the Twenty Twenty-Two and Twenty Twenty-Three themes, something like this might work. Please note, I've only tested these briefly, it may have broader impacts on your theme you'd need to test.

.entry-content {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
}

In the Twenty Twenty-One theme:

.entry-content {
    max-width: var(--responsive--aligndefault-width);
    margin-left: auto;
    margin-right: auto;
}

[noname-ever]

Hi there!

The theme we are using is "Flatsome". I have read all of your messages and came to conclusion that the issue lies within a theme. I am grateful that you have provided many possible ways in how to try to fix it. I will try some of them in the evening and will share my results.

EDIT: I have not yet been able to achieve viable solution but I will keep you posted regarding the progress.

[B-Interactive]

I've had a look at a few Flatsome demo themes, and there are a number of classes that make use of max-width. You might try ensuring, if possible, that your Cloudflare Stream shortcode sits within such an element.

The below CSS declaration seems to be pretty consistent in the Flatsome themes I had a look at, so it'd hopefully be a case of ensuring your player sits within an element that makes use of at least one of these classes.

.container, .container-width, .full-width .ubermenu-nav, .row {
    max-width: 1080px;
}

[noname-ever]

Hello.

You were right about it being theme issue. We have found that the actual "theme" was not the "frontend" rather "Sensei" Course management plugin. We have added following code:

body.single-lesson .entry-content { max-width: 850px !important; }

Now it scales perfectly.

Edit:

This is the culprit within Sensei plugin:

.sensei-course-theme .wp-block-post-content > *, .sensei-course-theme .wp-block-post-content .wp-block-group__inner-container > * {
    max-width: var(--content-size) !important;
    margin-left: auto;
    margin-right: auto;
}

[B-Interactive]

I'm glad it was able to be resolved! :smiley: