I am trying to:
Video embeds via the S3 Maestro plugin are appearing vertically stretched when a page first loads.
Link to a page where the issue can be seen:
hidden link
I expected to see:
The video player displayed at the correct height. The video will display at the correct height when the user presses play.
Instead, I got:
A vertically stretched video player.
The owners of the S3 Maestro plugin have informed me that Toolset Layouts is causing the problem. And sure enough, when I switch off Toolset Layouts, the video player displays on the page in the correct proportions.
Note from the authors of S3 Maestro: "It appears that the Toolset Layouts plugin is interfering with the CSS for S3 Media Maestro. Obviously disabling the plugin will fix this, however, you may want to check with the plugin authors to see if there is a way to allow another plugin to control video CSS. I looked at the Toolset plugin settings, but couldn't find anything obvious."
Could you ask the owners of S3 Maestro plugin if they have a technical debug they could provide us with?
I do not expect them to do it, but it might be it is already done and that could save time on both ends.
Otherwise, I will need the precise steps to replicate this issue.
Then, I will confirm this locally, and debug it so to escalate it either to our developers or contact the S3 Maestro plugin owners so to elaborate a common fix for the problem.
Toolset Layouts does not have settings for video because it generally does not display or provide video, but Layout grids made with Bootstrap 3
It might be that you use a Video cell, in that Layout?
It could very well be that this old issue is still happening:
https://toolset.com/forums/topic/embedded-media-wvideo-url-height-issue/#post-411653
(please do not add that code to your plugins, I just share it here as it might be a similar issue)
Although I use Layouts for the display of content on all posts on the site, I'm not using it to do anything special for videos. In fact, the portion of the page that contains the video is just displayed by Layouts using the 'Post Content' block within Layouts. Within the main Gutenberg editor, the video is output on the page via a special 'S3 Maestro' block.
What's interesting is that the video player resizes to the correct size when the video is playing. The issue is that the player appears in the wrong size (i.e., vertically stretched) on page load. It looks ridiculously large on desktops.
I have passed on your comments to the S3 Maestro people - and will let you know their response.
I found that by adjusting a Metadata setting within the S3 Maestro plugin, the video player height problem was cured. I have passed this feedback to the S3 Maestro people - who have yet to respond. However, I'm happy that the issue is now resolved.