WordPress Responsive Videos

How To Make WordPress Embedded Video’s Responsive

No doubt that WordPress is one of the most widely used content management tool which is already used by most of the blogs and even by some of the top companies for their main website. WordPress is simple to use and it can be used by any newbie who have some basic knowledge of internet. WordPress also comes with some out of box SEO setting which helps you to rank good in SERP.

WordPress Responsive Videos

As we all know Google has said that all websites should adopt responsive design for their webpages as it will be easy for reader as they are going to get same look and feel on mobile which they are getting on desktop version, Google has also said that webpages with responsive design will get high rank on SERP.

You can design responsive design with the help of CSS and javascripts but their is one thing which is not easy with just JS and CSS. When you embed video on a webpage either you have to wrap in under DIV and then you can define width and class for that DIV so that your video will look good across all screens.

But here you have to put div class every time you need to add video, but why you need to add DIV everytime when it can be done automatically, yes by adding some code’s into your theme file you can make your theme file.

As told earlier, WordPress does not add div around your videos so we are going to add div, for this just add following code to your functions.php file :-

/* Add responsive container to embeds
 /* ------------------------------------ */
 function ta_embed_html( $html ) {
 return '<div class="ta-responsive-vid">' . $html . '</div>';
add_filter( 'embed_oembed_html', 'ta_embed_html', 10, 3 );
 add_filter( 'video_embed_html', 'ta_embed_html' );

Now this code will automatically put a ta-responsive-vid DIV around your videos, next we have to define some styles for this so that it will adjust its width and height according to the screen, add following styles to your style.css

.ta-responsive-vid { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.ta-responsive-vid iframe, .ta-responsive-vid object, .ta-responsive-vid embed, .ta-responsive-vid video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }