search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.5k stars 4.2k forks source link

Youtube Embed Does Not Work #15471

Closed sungkhum closed 5 years ago

sungkhum commented 5 years ago

Describe the bug When I embed a Youtube video in a Youtube block and publish, the Youtube video does not show up.

To reproduce Steps to reproduce the behavior:

  1. Add a Youtube block
  2. Use a youtu.be share url (other urls don't seem to work, but if I use a youtu.be share url it at least shows up in the preview).
  3. Publish the post
  4. View the post, and no Youtube video shows up.

Expected behavior The embedded Youtube video should show up in the post.

Desktop (please complete the following information):

Smartphone (please complete the following information): Any smartphone.

Additional context

** Temporary Fix If I use the classic editor and use the [embed][/embed] shortcode the youtube video embeds correctly.

** Linked bug This might be related to this bug: https://github.com/WordPress/gutenberg/issues/8411 but since it is closed, I opened a new one.

aduth commented 5 years ago

Can you share a specific example of a URL you're trying to embed? I am not able to reproduce. From the relevant code, it seems that there may be expected cases where if, for example, you include "www." in the URL, it would not embed.

Relevant code:

https://github.com/WordPress/gutenberg/blob/1d81635e4320cb11ec4ee1d136628b63bc05ee91/packages/block-library/src/embed/core-embeds.js#L47

https://github.com/WordPress/wordpress-develop/blob/96649a5ad1a80cd8aaea15b955a48e292c406135/src/wp-includes/class-oembed.php#L55

sungkhum commented 5 years ago

Sure, here's an example: https://youtu.be/1aUHqeCffI0

aduth commented 5 years ago

I'm still having trouble reproducing on my end. For me, it displays correctly both in the editor and on the front of the site.

Can you clarify:

cperezabo commented 5 years ago

Hi, I have the same issue and it appears correctly in the editor, but in the front it shows

Captura de Pantalla 2019-05-08 a la(s) 10 14 49

And it shows as a simple link text

mitchellkrogza commented 5 years ago

Also youtube embed blocks added in the version prior to 5.2 now show up when editing a post as unrecognized block and needs to be resolved. Had it on 5 posts this morning.

aduth commented 5 years ago

Can both of you share which plugins you have active on the site?

If only a link shows on the front of the site, it could indicate that it failed to request embed information from YouTube's oEmbed API (possible server issue, network unavailability, plugin conflict).

If you're seeing blocks shown as having unexpected content, could you open your browser's developer tools console. There should be a message logged including "Expected" and "Actual" markup for a block. Can you share that here?

mitchellkrogza commented 5 years ago

:see_no_evil: I unfortunately already fixed my few posts that had the "unexpected content" issue. Will report if it happens again.

sungkhum commented 5 years ago

I'm still having trouble reproducing on my end. For me, it displays correctly both in the editor and on the front of the site.

Can you clarify:

  • Does it appear correctly in the editor? And if not, what is shown? Yes, it appears correctly in the editor.

  • Does it appear on the front of your site as a draft, or only when published (as your steps describe)? It appears only when I preview the post. When I publish, it no longer appears.

  • Can you share the theme and/or plugins you're using, in case there might be a conflict? I have a ton of plugins, using the Bimber premium theme.

aduth commented 5 years ago

If you are able to, I would suggest trying to temporarily disable plugins or switch to another theme, to be able to confirm whether or not it is a theme or plugin incompatibility.

youknowriad commented 5 years ago

I'm going to close this issue at the moment as it seems that we can't find ways to reproduce it. More likely a plugin incompatibility. That said, I'd be happy to reopen again if we have new details allowing us to reproduce it.

mathiasneue commented 5 years ago

Hi, I have the same issue and it appears correctly in the editor, but in the front it shows

Captura de Pantalla 2019-05-08 a la(s) 10 14 49

And it shows as a simple link text

It 's simple because your theme use $post->post_content and not "the_content()". Use the_content it will format Gutenberg code.

cperezabo commented 5 years ago

Hi, I have the same issue and it appears correctly in the editor, but in the front it shows

Captura de Pantalla 2019-05-08 a la(s) 10 14 49

And it shows as a simple link text

It 's simple because your theme use $post->post_content and not "the_content()". Use the_content it will format Gutenberg code.

That was the problem. Thanks!

fjobeir commented 5 years ago

I had the same problem, none of the embed items were working, I was just seeing the link and the caption. I could solve it by using the_content() instead of echo get_the_content()

danstramer commented 4 years ago

WordPress 5.3 seems to fix this bug

Lofesa commented 4 years ago

No. 5.3.2 version and can´t embed youtube videos in any format. My theme uses the_content() to display.....

ituk commented 4 years ago

I was also having the same problem, using the classic editor though. I don't understand why, but all I did to solve the problem was to disable and then re-enable Classic Editor and ACF plugins. hope it helps someone.

flavourmedia commented 4 years ago

First check for blocks in the content and after that filter the "url" from the block:

$output = ''; $blocks = parse_blocks( $content ); foreach ( $blocks as $block ) { $output .= render_block( $block ); if( "core-embed/youtube" === $block['blockName'] ) { $not_embedded = $block['attrs']['url']; $output = str_replace( $not_embedded, wp_oembed_get($not_embedded), $output ); } } echo $output;

mclarkos commented 3 years ago

I have found another cause for this issue—if the theme sets content_width too high, YouTube returns an error (something about width too large) that prevents the retrieval/construction of the iFrame element. WP then reverts to displaying the embed URL.

To reproduce, add the following to the theme's functions.php: function themename_content_width() { $GLOBALS['content_width'] = apply_filters( 'themename_content_width', PHP_INT_MAX ); } add_action( 'after_setup_theme', 'themename_content_width', 0 );

The general area of code where WP sends a failed request to YouTube is: wp-includes/class-wp-oembed.php

PHP_INT_MAX might be a bad setting for content_width, but I suspect lower values probably result in the same issue. There could be other WP users with the same problem. The main workaround is is to manually copy in an iFrame element (eg: https://wordpress.org/support/topic/youtube-videos-not-showing-in-browsers/).

This setting used to work with YouTube embeds back in early 2020. From memory, it was used to prevent banner images from being scaled down too far.

Possible fixes/improvements:

shinanqu commented 1 year ago

I have the same issue. In the editor, I can see the video normally, but at the frontend, just a while block is displayed (no URL, just white). I am using the Gutenberg YT embed block, but I have the same issue with the HTML YT embed code. Wordpress 6.3.1 DIVI 4.22.1 LiteSpeed Cache 5.6 ShortPixel Adaptive Images 3.8 Example: https://weltderbeamer.de/test/ At the bottom between the text is the YT video embed: Below is a video. --- Above is a video. I tried many different YT URLs. http instead https, old link, short link, etc. It all doesn't work.