How to make all videos responsive inside wordpress post

I see very often that many sites become non responsive because post has some youtube videos inside. This is problem, because, youtube player, by default, is not responsive. So, I will give you some code to fix this

Many themes has similar code which makes all videos responsive. But, sometimes there are no solutions in theme for this. So, you can use next code snippet

First of all, most of themes have area where you can add js script and css script. You should use it

Js code for responsive videos. Works with youtube, vimeo, dailymotion

jQuery(document).ready(function($) {
   'use strict';
// Gather all videos
var $all_videos = $('body').find( 'iframe[src*=""], iframe[src*=""], iframe[src*=""], iframe[src*=""], iframe[src*=""][src*="video.html"], object, embed' );

		$all_videos.not( 'object object' ).each( function() {
			var $video = $(this);
			if ( $video.parents( 'object' ).length )
			if ( ! $video.prop( 'id' ) ) $video.attr( 'id', 'rvw' + Math.floor( Math.random() * 999999 ) );
			$video.wrap( '<div class="video-container"></div>' )
		} );

} );

Also, you need some css code for responsive videos

.video-container { margin-bottom: 15px;overflow:hidden;padding-bottom:56.25%;position:relative;height:0; }
.video-container iframe{left:0;top:0;height:100%;width:100%;position:absolute;}

That’s all

4.4/5 - (8 votes)

We will be happy to hear your thoughts

Leave a reply

Wordpress optimization, monetizing tips and tricks