YouTube oEmbed or shortcode not working with Visual Composer?
VC parses shortcodes differently than WordPress. Here’s how to get your YouTube embeds working in Visual Composer.
Right to it: here’s the answer
Paste that shortcode into your Visual Composer text block and your video will work perfectly.
Why it works
It works because it’s the right way to embed YouTube videos—in Visual Composer or any other WordPress content editor.
But more on that later.
But to understand why it’s important (and why we had to write this post), we need to understand what else is going on with YouTube shortcodes & embeds.
Let’s look under the hood a minute
“Why does it work?” is actually the wrong question. We should really be asking “why don’t the other methods work?”
WordPress’ pulls the the text/media content of your site from your database with its
the_content() function. Within that function, it calls a number of other functions to parse the content, one of which is
do_shortcode() looks for an opening
https://www.youtube.com/watch?v=Cz6aEq4yP-E doesn’t start with
[, we know there’s something else going on.
What does that mean?
It means that simply pasting the YouTube URL is shorthand. Somewhere down the line, WP is converting those URLs to
[ embed ] shortcodes.
Enter: Visual Composer
VC is pretty much an elaborate system of shortcodes. Ever look at VC layouts in classic/text mode?
Because VC uses so many shortcodes, the plugin has lots of its own parsing and processing.
This Visual Composer custom parsing apparently conflicts with WordPress’ default parsing.
VC vs WP
So we know the YouTube URL is shorthand and that WP is converting those URLs.
WordPress converts YouTube URLs to
[ embed ] shortcodes. Visual Composer does not.
Known issue. Workaround needed.
I’m not a theme/plugin developer anymore. I’ve been out of the game a few years and the WordPress theme universe has moved on.
So I can’t say with authority how easy or hard it would be for WPbakery / Visual Composer to support the URL shorthand method.
But it seems easy to me. And if so, it’s a shame it’s not in there already.
Good news is the
[ embed ] method is also just as easy.
[ embed width="600" height="375" ]https://www.youtube.com/watch?v=Cz6aEq4yP-E[ /embed ]
Take out the spaces and use that. Done.