A better title would be
“How to Embed a YouTube Video in Gutenberg Properly“
I’ll bet if you been using Gutenberg (WordPress 5.0+) for any length of time you’ve embedded a video. It seems easy enough as there’s a handy dandy block for YouTube video right on your dashboard.
BUT… If you’ve been doing it that way, you’ve been doing it wrong. Sorry. 🙁
The better, the proper, the correct way to embed a YouTube Video is going to take just a few extra steps. It’s pretty easy to do. You’ll just have to determine your full width size then do a little basic math to figure out the height needed. Swap those numbers into your embed code and viola!
Maybe seeing it in action would be the best way to explain.
Watch This Properly Embedded Video
(on how to properly embed a video)
Does That Make Sense?
Remember: The video will shrink down to whatever size their viewport is (as in mobile) but it’ll never get bigger than what you have dictated (except for full screen options).
My last videos / posts on properly inserting images focused a little more on the mobile side of things while this is more about the desktop version of your site.
No matter if your visitor is on a desktop or a mobile device we want to give them the best possible experience as we can and that means full width text, images and video.
BONUS: If you’ve read down this far you know I like to reward you – the loyal reader, right?
Ok, so once the video is embedded and the post has published… Don’t forget to go back to YouTube and add the link back to the blog post in the description. Of course you’ll want to also make sure your video is public and not unlisted. Then what happens is YouTube will be driving people back to your site where of course you have lead capture and full control.
Photo by Glenn Carstens-Peters on Unsplash
- The Ultimate Guide to Writing the Perfect Blog Post - March 14, 2023
- 8 Questions Your Web Developer Should Have Asked - April 27, 2021
- Slack, Chat or Discord? - April 6, 2021