Video in Accordion breaking out

  • Resolved Brian_Milnes

    (@brian_milnes)


    4 years, 9 months ago

    The embedded YouTube videos are breaking out on a simple 3 column website

    View post on imgur.com

    Any idea why, please?

    <figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">

</div></figure>

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi @brian_milnes,
    this would be the ideal result: https://imgur.com/a/KjY4bx4 – I’m able to reproduce that same result in local using a native WordPress theme.

    Some CSS that doesn’t belong to your site either Advanced Gutenberg is creating margin and padding that is messing the end result. My guess tells me probably the HTML structure of your theme is related to this behavior:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head profile="https://gmpg.org/xfn/11">

    If you can change that to the code below through a child theme, may confirm my assumption:

    <!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>

    Regards

    Thread Starter Brian_Milnes

    (@brian_milnes)

    Thank you for the response.
    I didn’t see any notification of it so worked through this myself, and got similar deductions.
    The (old) theme had been either hacked around with, or was a mess from the start. It’s now abandoned, so there’s no need to worry about child themes. I’ve fixed it up enough to keep us going while we develop a new site.
    Thanks for your Plugin – good work and I’m starting to like Gutenberg!!

    Thread Starter Brian_Milnes

    (@brian_milnes)

    Editing the header, as you suggested, didn’t help, and (with my limited web skills) I did get to improve to this, less than perfect:
    (I copy this here, in case this is something that the Plugin is doing that it shouldn’t)

    View post on imgur.com

    Plugin Author htmgarcia

    (@htmgarcia)

    We appreciate your kind words, @brian_milnes!

    The suggestion to change the header is based on the fact your theme doesn’t use HTML 5. That can cause design issues like the one with padding/margin.

    Did you modified the header.php file? checking in my end, I still see the old HTML code.

    Thread Starter Brian_Milnes

    (@brian_milnes)

    Ah – I didn’t change it on the live server – just on the local one. (To no avail.)

    I’ve changed it now on live, but to no effect – you’ll see perhaps that the YouTube videos are more displaced than the mp4 embedded videos.

    But please don’t worry – we have more work to be done elsewhere and then this old site will be retired!

    Thanks again!

    Plugin Author htmgarcia

    (@htmgarcia)

    I understand.

    Have a good day, Brian!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Video in Accordion breaking out’ is closed to new replies.