If you’re using a new block editor in WordPress (also called Gutenberg) then you might have come across an annoying problem. You might have pasted the YouTube URL into the post in the backend, seen the preview generate automatically and published the post. After checking the live page you saw a surprise – instead of the video preview you only saw the link to YouTube video, and it’s not even clickable. Something like this:
You might also see some error saying that there was a problem displaying the video.
This is disappointing, and trying to fix it yields no results. This has happened to me and luckily I found a solution.
Three ways to add a YouTube video to WordPress
1. The easiest way is just to paste the URL. After the URL is pasted in the block editor it will fetch the preview and show the controls like this:
2. Another obvious way or creating a YouTube block is clicking the ‘plus’ sign in the editor, and then selecting the YouTube block.
After selecting it paste the video in the block and it will display the preview the same way as in 1).
3. The third way is more innovative. Instead of using the YouTube block, just use the Custom HTML block.
Instead of pasting only the URL to YouTube, go to the actual video in YouTube page, and select “Share”, then “Embed”.
You will receive a sharing code and copy and paste that one into the Custom HTML block in WordPress. The result will be a bit different this time. The editor will not display a preview of a YouTube video, it will display just the code that you have pasted. But that’s okay, so publish the page and review the results.
Test results – demo
Here’s a YouTube video embed with method 1:
Here’s a YouTube video embed with method 2:
Here’s a YouTube video embed with method 3:
On the back-end it looks like only method 1 and 2 work and method 3 does nothing:
However, on the front-end (live site) the result is completely different. Methods 1 and 2 only output a link to the video (without a real link), but method 3 displays the video preview.
After you check your website for each of the three above described methods, you might be surprised. Only the third method works correctly! And that is also the solution to this problem of YouTube video not showing in WordPress if you used block editor.
I hope that the WordPress team will fix the error which probably lies in YouTube block or some faulty caching. Many people have such problems, but this solution might be handy if you have the same error on your site.
If you see all three videos in the Demo above, that means that WordPress has at least for some cases fixed the problem. If you’ve done all that I wrote in the method 3 and the solution and YouTube still doesn’t work, you might want to try updating WordPress to the latest version.
Yes, I am having the same problem with one of my websites. Yes the workaround as described here works, so going forward we have a solution
However, the site has over 100 embedded YouTube videos that do not display a link. Is there a way to do some sort of mass change to the current embedded links in published posts
I’m glad that my solution works for you.
Having 100 embedded YouTube videos can be a lot of work to fix manually. I don’t know of any mass change, but I would try the following:
1) Updating WordPress
2) Installing the stand-alone Gutenberg plugin from https://wordpress.org/plugins/gutenberg/
These two things might fix all 100 videos, but I’m not sure. I think it’s worth trying.
Make sure to comment how you solved it!
Hi Miha, thanks for your prompt response. I know that it would be a long stretch for some way to do a mass change
I am currently at WP 5.8 so at the latest release of WP and the inbuilt Gutenberg Blocks. From what I have read, since reading your suggestion, there is no point in installing the latest release of the Gutenberg Plugin, unless I wanted to go to a RC (Release Candidate) which I would not do on a production site. Thanks for the suggestions.
I will do some further research and comment how I am progressing