YouTube oEmbed or shortcode not working with Visual Composer?
Sucks, huh?
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
No: https://www.youtube.com/watch?v=Cz6aEq4yP-E
Yes:
[script src=”https://gist.github.com/gitmxt/e5f70923cae7a20dfc99552eea889614.js”]Paste that shortcode into your Visual Composer text block and your video will work perfectly.
[one_half]
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?”
Here’s why.
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().
And do_shortcode() looks for an opening [ character.
Since 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.
TL;DR
[ embed width="600" height="375" ]https://www.youtube.com/watch?v=Cz6aEq4yP-E[ /embed ]
Take out the spaces and use that. Done.
didn’t work
Could you elaborate please? What do you see when you try? It has always worked for us and our clients.
What version of WordPress and/or Visual Conposer are you using?
it just show a message “The page you are looking for does not exist.” where the video is supposed to be seen
Hi @disqus_3fnHGc4o48:disqus , can you show us the page you’re working on? That doesn’t sound like a YouTube error message.
If possible, please post the URL of the live page and a screenshot of your Visual Composer editor screen.
Doesn’t work I’m afraid.
Could you elaborate? What do you see when you try? It has always worked for us and our clients.
What version of WordPress and/or Visual Conposer are you using?
Same here, doesn’t work… My wysiwyg editor changes it to `{`embed width=“500“ height=“305“`}`https://www.youtube.com/watch?v=irMp1H7Ss7k`{`/embed`}`… Latest wordpress version, VC version 5.0.1
I know VC went through a major change in the latest version. They may have changed how they handle shortcodes in their wysiwyg. If that’s the case, I’ll have to update this post.
Have you experimented with other methods to make it work?
Because lack of time, I’ve chosen the lazy method and just pasted the embed code in the element based on the title parameter. Not the way to go, I know, but I had no other option. I hope to stretch this solution until VC comes with a fix for this :)
I’m not sure I follow what you’re saying here, but I’m glad you found a workaround. I’ll do some digging and update my post as necessary!
I’ve placed the video embed code I wanted into the PHP code itself via an if statement based on the title of my element in stead of pasting the embed code into to wysiwyg editor. Not proud of the workaround but it works for now. In the project I have, the client doesn’t need to update the content so it’s not really a problem just now.
VC v5.3 WP v4.8.3 I can confirm it works. Just to be sure, choose the Text tab not Visual, though it worked for me on the Visual tab too.
Its working perfect mate…..you are a code eater!!! Check out my website and the video posted is via WPBakery v5.5.4 and its a dream come true. Nothing worked before this….I tried all these WordPress plugins (youtube-video-player.1.8.7, wd-youtube, huzzaz-video-gallery.8.0, youtube-showcase.2.8.0, wd-youtube.1.0.18, yottie-lite.1.3.0, youtube-embed-plus.11.8.3 & embedly) and the video width was about 400px but the height got further than a 100px & it was boxed in a container. I tried the ‘full height setting’ in the WPBakery Editor and even shortcodes…but nothing worked, until this Wooooooowwwwwwww…
Thanks for the comment, @kirpalspanesar:disqus! Glad it worked for you.
Love the post, it works perfectly!
But how would this work in responsiveness?
Yes, I believe so!