How to make YouTube embed Responsive in WordPress

WordPress allows for you to easily embed a YouTube video in your WordPress website with a simple paste of the YouTube video's URL.However if you have a responsive website, then you run into a little problem where the video is not responsive. Suddenly your website doesn't look so good anymore as the video is wider than your website container, when viewing on smaller devices such as phones and tablets.Fortunately there is a very quick and easy way to fix this. Follow the steps below on how to make YouTube videos responsive on your WordPress website. This also works for Vimeo videos.Important Note: Always check that your WordPress theme and / or WordPress plugins that you are using do not already have features for displaying responsive videos, as some do.

Creating a WordPress function using FitVids.js to make your video embeds responsive:

1. Download FitVids.js from Github at http://github.com/davatron5000/FitVids.js. You want to download the zip file to your computer.
2. Now extract the zip file, locate the file "jquery.fitvids.js", and upload via FTP this file to your website's childtheme folder, into a folder for your scripts, such as "js" or "scripts". If you are not using a childtheme, then upload into the scripts folder of your active theme.
3. Create a new file called "fitvids-script.js" and place the following code inside the file, then upload via FTP this file also to the same scripts folder.jQuery(document).ready(function() {
   
       jQuery(".post").fitVids();
   
     });
   
   This script is to tell the FitVids script where to look for the videos that need to be responsive. I have selected ".post" however you can target however you like, for eg ".container", ".wrapper", whatever is appropriate for your website page with the embedded videos.
4. Create a new function in either your childtheme's functions.php file, or alternatively into an "mu-plugin" file if you are using one.function fitvids_scripts_enqueue() {
   
       wp_enqueue_script('fitvids', get_stylesheet_directory_uri() . '/js/jquery.fitvids.js', array( 'jquery' ));
   
       wp_enqueue_script('fitvids-script', get_stylesheet_directory_uri() . '/js/fitvids-script.js', array('fitvids'));
   
   }
   
   add_action( 'wp_enqueue_scripts', 'fitvids_scripts_enqueue' );
   
   If you have uploaded the files from steps 2 and 3 above to a folder named other than "js", then you need to amend the url path above to reflect this.
5. Now you simply need to paste the YouTube URL into a post or page and test it out. If you are wanting to override the displaying of related videos at the end of your video, then instead, you'll need to paste in the iframe share code from Google, and be sure that the "Show suggested videos when the video finishes" is unticked.

And since today is "International Day Of Happiness", here's a responsive video for the occasion: