How to make all videos responsive inside wordpress post

November 14, 2020 1693

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

<script>
jQuery(document).ready(function($) {
   'use strict';
// Gather all videos
var $all_videos = $('body').find( 'iframe[src*="player.vimeo.com"], iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"], iframe[src*="dailymotion.com"], iframe[src*="kickstarter.com"][src*="video.html"], object, embed' );

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

} );
</script>

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