Video Content is one of the powerful ways to engage today's audience. A picture may be worth a thousand words but a video is worth ten thousand words. However what good is that video if the audience is unable to enjoy it?
One of the most common ways to embed a responsive YouTube video in a WordPress site is by use of plugins. Plugins extend WordPress ability beyond just stock. One of the primary reason WordPress is so popular today probably has a lot to do with the availability of huge selections of Plugins. Despite these plugins undeniable contribution, their reputation is not untarnished. A plugin can make a site bloated or worse, can open back orders due to poorly designed code.
Wouldn't be nice if there was a way to embed a video that is very responsive on both desktop and mobile device alike? Fear not, there is a way and that is exactly what this how-to is all about.
The simplest way to embed a YouTube video in WordPress post is to simply copy and paste the YouTube video link. Link may be in the following format:
https://www.youtube.com/watch?v=464puoD09dM
This works great on both desktop and mobile devices if the WordPress template in use is fully responsive. But if it is not, the video will most likely be cropped when viewed on mobile or the browser is being resized on desktop.
Sometimes it is necessary to embed a YouTube video using an iframe because it allows additional settings such as size of the video, turning player controls on or off, enabling privacy-enhanced mode etc. In such cases, simply pasting the iframe URL will not make the video responsive at all. By using CSS code we can accomplish just that without using a plugin at all:
Step 1: Sharing Options
Click Share on the video to be embedded from YouTube site to open sharing options:
Step 2: Selecting iFrame
Select Embed from the sharing options:
Step 3: Copying iFrame Code
Copy the iframe code of the video to be embedded:
Step 4: Embedding iFrame
Paste the iframe code inside a WordPress port where the video needs to be embedded and wrap it in a div tag with a class as following:
<div class="responsive-youtube"><iframe width="560" height="315" src="https://www.youtube.com/embed/464puoD09dM?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Step 5: Creating Site Wide CSS Class
The class responsive-youtube needs to be created in Wordpress so it can be called from any posts.
Step 5a
From WordPress admin dashboard, goto Appearence > Customize.
Step 5b
Click on Additional CSS and add the following CSS code to create the class responsive-youtube:
.youtube-responsive-container {position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {position:absolute;top:0;left:0;width:100%;height:100%;}
Step 5c
Save the file and Exit customization.
Any YouTube embedded code is wrapped with the div tag now will appear as fully responsive on any devices. Note that the class name can be anything as long as same class name is used in both div tag and main CSS code to create the class.
