Youtube video using Gutenberg not showing in posts

  • When we insert a Youtube embed with Gutenberg we can see the video and post correctly in the editor but once you visiualize the page the video is not showing.

    <!– wp:core-embed/youtube {“url”:”https://www.youtube.com/watch?v=iUZ3Yxok6N8&#8243;,”type”:”video”,”providerNameSlug”:”youtube”,”className”:”wp-embed-aspect-16-9 wp-has-aspect-ratio”} –>
    <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>
    <!– /wp:core-embed/youtube –>

    <figure class=”wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio wp-embed-aspect-4-3″><div class=”wp-block-embed__wrapper”>
    <span class=”embed-youtube” style=”text-align:center; display: block;”><iframe class=”youtube-player” type=”text/html” width=”1200″ height=”675″ src=”https://www.youtube.com/embed/ZE9KpobX9J8?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent&#8221; allowfullscreen=”true” style=”border:0;”></iframe></span>
    </div></figure>

    If we use the html editor the video is shown

    <!– wp:html –>
    <figure><iframe width=”1280″ height=”720″ src=”https://www.youtube.com/embed/BbL3RucD0a4&#8243; allowfullscreen=””></iframe></figure>
    <!– /wp:html –>

    With another theme this does not occur. We have seen that the problem may be due to the theme using $post->post_content and not “the_content()” option. Or how the embed function works. add_theme_support( ‘responsive-embeds’ ).

    We did not have this problem in the past with the Oceanwp theme

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

  • Hello @astrix69,

    Please see this forum topic and let us know if it was helpful

    Hi all! I noticed this exact same problem! Embed works normally on other themes.

    Having clean WP 5.4 installation and OceanWP 1.8.2 Ebed disappears from front end. This is related somehow to responsivness of blocks. When editing the embed block and disabling “Resize for smaller devices” option, then video appear on the front end, but then the video window doesn’t resize properly.

    Thank you @wpfleek for pointing to this post. Suggestion to add a CSS `.wp-embed-responsive .wp-block-embed .wp-block-embed__wrapper:before {
    position: relative;
    }` did fix the problem, but I still have a question.

    Is this a bug or is it happening only to me, @astrix69 and @funnybunnyhelena? Perhaps we should change some settings for our theme or site?

    I think the main problem really is that they use elementor and forget that most of us won’t use it in main pages or posts.

    Gutenmberg is the default editor and the recent WP update added many features there. I think they are looking at it.

    There are issues with the block for media too, the blockquote and the table block requires full width.

    I really hope they check it and clean the code there cause if we have to add a custom CSS to fix each non responsve block it will only slow down our sites even more.

    Please guys code with core features in mind, elementor is an addon.

    • This reply was modified 4 years, 7 months ago by Manu.
    Thread Starter astrix69

    (@astrix69)

    Hi @wpfleek thanks for the quick response the

    .wp-embed-responsive .wp-block-embed .wp-block-embed__wrapper:before {position: relative;} relative;

    placed in the CSS did work. The videos are now showing.

    As @manuxx34 and @rubidze mention we are using the Gutenberg editor for simple posts as the block format is much quicker for a lot of posts rather than using Elementor.

    Is this something that will be updated in future updates because it has only happened recently with updates to the theme and wordpress updates?

    Hello @manuxx34.

    We’re really sorry you got that impression, because Gutenberg is just as important to us as Elementor. And personally, I prefer Gutenberg over E when it comes to Blog posts.

    If you have info about everything you consider to be a bug or an error, please provide us with all details as well as steps to replicate. Unfortunately, no matter how much we test everything, it’s really easy to overlook some things.

    Hello @astrix69, @rubidze and @funnybunnyhelena it is a temporary bug and affects all websites, not just yours so don’t worry about it. It will be resolved with the next update.

    We are truly sorry for this inconvenience and thankful for your patience.

    Thanks @wpfleek for this info. I have been fixing lots of CSS already on my sites and I thought that I have gone crazy expecting this mobile resize to be working. Didn’t realize that this is a new issue and will be fixed soon.

    I prefer Gutenberg and if possible I’m trying to keep my sites clean from overwhelming plugins. I am using OceanWP without Elementor and so far have been doing fine. The only serious complaint I have is about editor styling. It is way too far from what we see in the front end. But again, by adding a bunch of CSS to editor pages I have managed to get it to look almost like it appears in the front end. But I think this story goes too far from current topic and it will be better to start a separate one for this.

    Many thanks to developers and the whole OceanWP team! Keep up the good work and we will just wait for the update.

    I noticed that OceanWp automatically adds the following css styles on YouTube Gutenberg blocs (advanced part in bloc properties) : wp-embed-aspect-16-9 wp-has-aspect-ratio
    If I remove these styles, the video now displays. But the aspect ratio is not 16-9, and the bloc does not resize on small screens. So the problem remains…

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Youtube video using Gutenberg not showing in posts’ is closed to new replies.