WordPress: Make embedded videos responsive

Responsive design is the approach of designing websites where the content is optimally displayed regardless of screen/device, simply put the website will adapt to your screen size and display the content to best fit.

Most WordPress themes now come with a mobile responsive design but you cannot guarantee that it is all well optimized and done correctly. Here is a little handy CSS code snippet that will help you make your embedded videos/objects responsive.

Paste the following code in your current themes style.css file

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.entry-content img, 
.entry-content iframe, 
.entry-content object, 
.entry-content embed {
        max-width: 100%;
}

Now whenever you embed a video add the div tag with class .video-container.

<div class="video-container">Your video code goes here</div>

Here you can check the demo.