Gutenberg: I cant embed youtube video

[cwd1130]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'block'
2. Click on 'youtube'
3. input ''
4. See nothing

but if i edit in html, it works

Expected behavior
video

Screenshots

Desktop (please complete the following information):

• OS: windows
• Browser chrome
• Version

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

• Please add the version of Gutenberg you are using in the description.
• To report a security issue, please visit the WordPress HackerOne program: https://hackerone.com/wordpress.

[swissspidy]

Could you please complete all the fields in message as stated? Things like OS, browser version, version of Gutenberg, etc. are important to know.

Are there any error messages in the browser console when you try to insert the video? You can open the developer tools using F12 to see the console.

[swissspidy]

Possibly related: #8423.

[designsimply]

I tested inserting a YouTube link and it worked in my test which I am including here in case you can see something in it that you did differently:

Video: 48s
^{Seen at alittletestblog.com/wp-admin/post.php?post=14107&action=edit running WordPress 4.9.8 and Gutenberg 3.4.0 using Firefox 61.0.1 on macOS 10.13.6.}

Sample URL used: https://youtu.be/aisa62faa1c

[SweetSue]

https://youtu.be/aisa62faa1c
is not working.
https://www.youtube.com/embed/aisa62faa1c
does not work either
but
https://www.youtube.com/watch?v=aisa62faa1c&feature=youtu.be
works

[gmariani]

Doesn't work for me. Tried
https://youtu.be/r_fMZ9qFAA8
https://www.youtube.com/watch?v=r_fMZ9qFAA8
https://www.youtube.com/watch?v=r_fMZ9qFAA8&feature=youtu.be
https://www.youtube.com/embed/r_fMZ9qFAA8

None were recognized

[designsimply]

@SweetSue & @gmariani some improvements have been made to the video block since you last posted. I have re-tested just now using WordPress 5.0.1 with Gutenberg 4.7.0 and also without the Gutenberg plugin installed (which is no longer needed for WP 5.0.x) and I was able to add each of the following sample URLs as video embeds without any problems.

• https://youtu.be/aisa62faa1c
• https://www.youtube.com/embed/aisa62faa1c
• https://www.youtube.com/watch?v=aisa62faa1c&feature=youtu.be
• https://youtu.be/r_fMZ9qFAA8
• https://www.youtube.com/watch?v=r_fMZ9qFAA8
• https://www.youtube.com/watch?v=r_fMZ9qFAA8&feature=youtu.be
• https://www.youtube.com/embed/r_fMZ9qFAA8

My testing steps:

1. Click the block inserter and search for YouTube.
2. Add a YouTube block.
3. Paste in one of the URLs from the list of sample URLs above.
4. Repeat for each sample URL.

Note: I did find that you do have to paste the URLs into the YouTube block (not into an empty block) which looks like this:

If you are still having trouble, please re-open this issue and please mention what version of WordPress you are using and whether the Gutenberg plugin is activated and also its version.

[AudeWillart]

Hello,
WordPress version : 5.0.1 without Gutenberg plugin, I have the same issu.

[swissspidy]

Note: I did find that you do have to paste the URLs into the YouTube block (not into an empty block)

@designsimply Shouldn't that work though? 😕

[buerklin]

Hello. Confirmed Issue on WordPress 5.0.1 too.
Seems that links with a underline (_) are affected. In my case the links to be tested (https://youtu.be/aisa62faa1c) above work, but my link not. One additional observation: links are case sensitive! Testlink has lowercase letters only

[opensaurusrex]

I have the same issue, I am only able to use the https://youtu.be/hQrB1PoyHGg form, when using the youtube embed. I get the following response in the developer tools, if it is not using the short url: {code: "oembed_invalid_url", message: "Not Found", data: {status: 404}}. And, when actually browsing to the location it's calling it shows: {"code":"rest_forbidden","message":"Sorry, you are not allowed to make proxied oEmbed requests.","data":{"status":401}} (Not sure if this is blocking anything without a referrer or not, to be honest)

Google Chrome Version 71.0.3578.98 (Official Build) (64-bit)
Apple macOS Mojave Version 10.14.2

[swissspidy]

I successfully tested embedding https://youtu.be/hQrB1PoyHGg and https://youtu.be/aisa62faa1c.

Please note that embedding http://youtube.com/embed… URLs currently does not work because of an issue in core: https://core.trac.wordpress.org/ticket/45447

[opensaurusrex]

Thanks for that info. Is it going to be included as a fix in an upcoming version?

[swissspidy]

I'll try to push it for WordPress 5.1. You can follow that ticket for progress :-)

[Lukc666]

YouTube embed error. Wordpress 5.0.3.

Workaround: used html to embed iframe. Still, seems like a bug.

[cesare190]

It still not working on Wordpress 5.0.3

[designsimply]

Note: I did find that you do have to paste the URLs into the YouTube block (not into an empty block)

@designsimply Shouldn't that work though? 😕

That's fair! To be clear, of the URLs I tested, the YouTube URL that starts with https://www.youtube.com/embed is the only one that did not work (which you noted found and fixed in https://core.trac.wordpress.org/ticket/45447, thank you! 😍).

I have the same issue, I am only able to use the https://youtu.be/hQrB1PoyHGg form, when using the youtube embed.

@opensaurusrex I tested using the https://youtu.be/hQrB1PoyHGg form by entering it into an embed block and it worked in my test. I used WordPress 5.0.3 with no plugins active and Chrome 71.0.3578.98 on macOS 10.13.6. Would you mind double checking the same steps from my screencast below or let me know if something in your steps are different from mine?

@Lukc666 and @cesare190, your case looks like it may be different from the problem with the format of the URL, so let's take a closer look. @Lukc666, I can see that the URL in your screenshot is https://www.youtube.com/watch?v=wEGdhznwcdA and that you are trying to embed it into a YouTube (not an embed) block. I tried testing that and got the same result!: "Sorry, we could not embed that content." But when I tried with a similarly formatted YouTube link https://www.youtube.com/watch?v=9HUV5a7MgS4 it worked! So now I am wondering if it's something specific to the settings for that video in particular. Are you the author of the video at https://www.youtube.com/watch?v=wEGdhznwcdA and do you know what might be different about it compared to other videos uploaded to YouTube? The only thing I noticed when looking around on the page is that https://www.youtube.com/watch?v=wEGdhznwcdA has a Creative Commons Attribution license and I wonder if that could be the cause (which would help us to know) or if the video has some other setting such as embeds are turned off in the video manager under "Additional options" > "Allow embedding" (screenshot). Can you check that for your video? @cesare190, I cannot see the full URL of the video you are trying to embed, are you able to check whether or not that video had embeds turned off through YouTube?

Video: 25s
^{Tested with WordPress 5.1-beta1-44629 and Akismet as the only active plugin using Chrome 71.0.3578.98 on macOS 10.13.6.}

[opensaurusrex]

@opensaurusrex I tested using the https://youtu.be/hQrB1PoyHGg form by entering it into an embed block and it worked in my test. I used WordPress 5.0.3 with no plugins active and Chrome 71.0.3578.98 on macOS 10.13.6. Would you mind double checking the same steps from my screencast below or let me know if something in your steps are different from mine?

@designsimply I was saying that that https://youtu.be/hQrB1PoyHGg was the only one that had been working with the Youtube block at the time. Just tested out the different links and found that https://www.youtube.com/embed/pbTwNqrHAiA is still not working, but https://www.youtube.com/watch?v=pbTwNqrHAiA&feature=youtu.be is now working. As for my previous tests, I might have pressed the wrong button when trying a new link the other day by clicking _Retry_ instead of the _Embed_ button to the side. So, it's better than it was the other day, whatever the situation was. It seems like you actually have to paste the URL in, or something?

Failures with embed URL by format:

• https://www.youtube.com/embed/pbTwNqrHAiA
• https://www.youtube.com/embed/pbTwNqrHAiA?rel=0&showinfo=0

Successes with embed URL by format:

• https://youtu.be/pbTwNqrHAiA
• https://www.youtube.com/watch?v=pbTwNqrHAiA
• https://www.youtube.com/watch?v=pbTwNqrHAiA&feature=youtu.be

[designsimply]

https://www.youtube.com/embed/pbTwNqrHAiA is still not working

Got it! Thanks for the follow-up. This is what I'm seeing as well and the problem with that particular URL format is being tracked at https://core.trac.wordpress.org/ticket/45447. While that bug is being worked on, please use the https://youtu.be/pbTwNqrHAiA or https://www.youtube.com/watch?v=pbTwNqrHAiA versions of the URL to embed that video.

We can continue discussing the case where some videos are showing a "Sorry, we could not embed that content" message regardless of the format of the YouTube URL but currently it seems they may be restricted on the YouTube side somehow and it would be great if we could find a not-working one that someone owns so we can try to verify that.

[kmh3785]

Just throwing my hat in saying I'm having this same issue, regardless of URL format

[opensaurusrex]

Have you tried other URLs? This one may me locked to local environments and specific domains since it's a made by a client of mine and they have that copyrighted, etc, I know they did it with old Vimeo videos but wasn't sure whether they had on Youtube. I just thought about how that was a bad example to test, even though I needed to know if they were working or not, earlier.

[kmh3785]

@opensaurusrex Yep, the same issue happens with our own videos.

[designsimply]

@kmh3785 I tested adding https://www.youtube.com/watch?v=pbTwNqrHAiA to a YouTube block with WordPress 5.0.3 using Firefox 64.0.2 on macOS 10.13.6, and it worked in my test. May I ask if you could try a few different URLs as a test to see if the same problem happens for you with those? Here are a few more example URLs that are working for me:

• https://youtu.be/1XW1Ygatsz4
• https://www.youtube.com/watch?v=AxFYZQQdJCg
• https://www.youtube.com/watch?v=U9t-slLl30E

For your own videos, can you check the Video Manager in YouTube to see if the "Allow embedding" option is checked or unchecked?

[Lukc666]

@designsimply hi and thanks for the response!

It's not my video, some acquaintances uploaded it ages ago. Still, it is odd that the same format works for other videos. That's an interesting point you make about the license possibly interfering - I'd never have thought of that.

I don't have a clue what it was, just that it was an odd use case - most other videos embed fine (I also tested a different video, and thought it was the '=' symbol). It does work using the YouTube embed iframe code, so ... dunno.

[designsimply]

All right, since you aren't the owner of the https://www.youtube.com/watch?v=wEGdhznwcdA video and cannot check the settings and because other similarly formatted URLs are working in testing and there is an issue on file at https://core.trac.wordpress.org/ticket/45447 to cover the remaining verified case, let's see if we can find at least one other case we can use to verify whether a restriction in the YouTube settings could be the cause of the trouble.

[Lukc666]

I'll add it here if I find it. Thanks!

[opensaurusrex]

I have disabled embeding on one of my videos for a use case. It is at https://www.youtube.com/watch?v=ceZZDjg0L3s and another that you can use to test embeds is https://www.youtube.com/watch?v=ixXz6p6-vCg. I didn't see any way to limit by url, in the settings. So, if it's failing, it's likely due to the inability to reach the server and not a limitation on location. They have a simple checkbox for embeds to be enabled or not.

[eriktdesign]

I too am having issues with embeds in Gutenberg. No matter how I try, I always get a blank box with an empty iframe. The iframe has a data-src attribute that is equal to the video's URL.

I've got a local version of a site running where I've disabled all plugins and activated twentynineteen, and it still doesn't work.

[designsimply]

@eriktdesign may I ask that you please create a new issue and include steps to reproduce including exactly which type of block you select originally (i.e. generic embed block, YouTube block, or do you just enter the YouTube into a new block without first selecting any kind of specific embed block?) and also make a note of the YouTube URL you are using (or a similar one that doesn't work for you) and mention what you did above about your local setup but also mention the WordPress version you're running for reference?

[opensaurusrex]

@designsimply Should I also do the same for mine?

[designsimply]

@opensaurusrex nope, for your case it needs to be fixed in Core and you should follow https://core.trac.wordpress.org/ticket/45447 🙂

[Gassolo]

I have no luck with any of your URL-s or mine, my aim would be to embed a playlist though.
I am running wp 5.1.1. and a number of plugins, but I have no idea what the problem is.

https://www.youtube.com/playlist?list=PLE5Mryzzd6gjvESxQ6LG7THxm67Gjj5dQ

[hacknug]

@Gassolo does it work for any other YouTube links? If it doesn't what about other embed blocks, do they work? I've just tried that link on a local site and it works fine for me.

[Gassolo]

Nope, doesn't work for any youtube links, tried the sample ones listed here as well. I tried different browsers, also tried plugins to embed videos, or spotify, doesn't work. Also, I couldn't even embed an RSS feed. Something seems to be blocking embedding. Juicer plugin is the only one that works, but I guess that's because it's not a direct embed.

[sungkhum]

Having the same issue.
If I use a https://youtu.be url (rather than https://www.youtube.com/watch?v=) it works in the "preview" but not in the published page.
If I manually insert the [embed][/embed] tags the video shows up fine in the classic editor.

[hacknug]

@Gassolo some plugins disable the WordPress emebeds functionality (WP Rocket is one of them, maybe other cache plugins do the same thing). Are you by any chance using WP Rocket? If not, try to disabling all plugins and using twenty-nineteen to check if it's something plugin/theme related.

[cabrote]

The only way I can make it work is using complete URL in http instead of https

[oxyc]

As this issue is closed you should probably comment here https://github.com/WordPress/gutenberg/issues/15471

[OniLinkCR]

I would like to add to the discussion as well ,as I had the same issue, but the problem I had is that I modified the content by hooking into its respective filter and I was removing the information related to the YouTube embedded info.

So the embedding worked on the backend and the editor, but not on the front. So I was in fact "stripping" the info related to YouTube embeds or any block that uses attributes which are stored as comments within the wp_post table.

So be on the lookout for plugins or functions that modify the content like this.

[gabyferman]

Why is this thread marked as closed? I keep getting the error while using gutenberg blocks, either YouTube Block or Video Block

[eriktdesign]

I would like to add to the discussion as well ,as I had the same issue, but the problem I had is that I modified the content by hooking into its respective filter and I was removing the information related to the YouTube embedded info.

So the embedding worked on the backend and the editor, but not on the front. So I was in fact "stripping" the info related to YouTube embeds or any block that uses attributes which are stored as comments within the wp_post table.

So be on the lookout for plugins or functions that modify the content like this.

This helped me figure out what was happening. I was using a lazy-load script on the frontend for YouTube videos, and I had a PHP snippet that was doing changing the iframe src to data-src -- this was inside an ! is_admin() conditional, but this was still what was breaking it for me. Removed that filter and all is well. So basically, just because you think your code is only filtering the frontend, with Gutenberg, it may not be.

[sungkhum]

For me it ended up that my theme was removing the youtube embed if I had disabled showing the featured image in the post.

[LukaSmolcc]

Hi, I just wanted to add to the topic, I am experiencing the same issue as well, I just want to note that besides being unable to embed new videos to a post, videos previously embedded and working have stopped being displayed, I think this issue should definitely be reopened and examined further. So far none of the suggestions I noticed here have worked for me, I'll get back with a follow up here if I stumble upon a solution that works.

[designsimply]

Why is this thread marked as closed? I keep getting the error while using gutenberg blocks, either YouTube Block or Video Block

@gabyferman because the original steps to reproduce the problem were tested and confirmed as working in https://github.com/WordPress/gutenberg/issues/8411#issuecomment-448016182 and it's hard to sort out what might be going wrong with someone else's setup without more information. It's a fine line knowing when to close an issue sometimes! In this case, I tested all of the steps noted and all of the URL formats noted and found that https://core.trac.wordpress.org/ticket/45447 covers the case to cover classic embeds and that I couldn't replicate the problem otherwise. I would really appreciate a new issue being opened with a bit more detail (and definitely including the YouTube URL you are using) if you are still experiencing the problem.

@eriktdesign thanks for the follow-up!

@sungkhum 😮

@LukaSmolcc please note that the problem where classic embeds aren't displayed in the editor is being tracked in https://core.trac.wordpress.org/ticket/45447 now. For the case where you are unable to embed a YouTube video, would you mind creating a new issue and including the following details? Please note: your WP version, the YouTube URL you are trying to embed (or one with exactly the same format), which block you used (YouTube or video), and any other notes you can think of that might be helpful.

[fjobeir]

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()

[Elgameel]

I have the same problem now on all websites on my server.

[ouun]

Same here, it seems to me that the iframe and embed code is generated within the the_content filter because this is working fine: <?php echo apply_filters( 'the_content', get_the_content() ); ?>