How to make YouTube embed Responsive in WordPress

make youtube embed video responsive wordpress

Age of Article Warning:
This article was originally published 50 months ago. The information, tips and techniques explained may outdated. Examples shown on this page may no longer work. Please consider this when viewing the below content.

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:

 

Filed under: WordPressTagged with: ,

2 Comments

  1. I saw your article and before all congratulations, did not know this method. There are people who do not like much to add scripts to their themes, or because they do not feel comfortable to tinker with code or because they want to carry the minimum of possible scripts. In this cases, we can choose to add css styles. There are plenty of tutorials to explain what should be added, give you one that I have test (http://www.wpstuffs.com/youtube-videos-responsive-wordpress/). If we opt for something more complete, you can always use the bootstrap, there last version v.3.2.0 now offers classes responsive to embed elements.

    I leave these tips…

    My best,
    Carlos Silva

    • Hi Carlos,

      Thanks for your feedback, yes the css method is definitely another option, and one that I have used in the past also. Keeping scripts down is a great point and I agree. I like to use the fitvids jquery method though for my client’s websites, because it means they can just add the YouTube url into their posts and pages, rather than having to get them to markup using divs.

      This link is also useful http://webdesignerwall.com/tutorials/css-elastic-videos


Comments are closed for this article!