Become Wordpress Professional - Your Ultimate Wordpress Guide

Sunday, 5 May 2013

How to Make Videos Responsive in WordPress

How to Make video Responsive in WordPress
If you have a video blog based on WordPress then you might facing a problem of video resolution in different devices like iPad, iPhone and Android smartphones. Previously we also wrote an article about how to make image Responsive in WordPress. If you have a responsive design for your video posts then it will automatically adjust and resize the embedded video in different browsers according to the device view dimensions such as width and height.

Make your Embedded Video Responsive in WordPress

You can make your video responsive by using the CSS code below. This CSS code will resize your video when they are viewed in different devices and browsers. 

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

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

Copy the above code and Go to your WordPress Dashboard Area. Then click Appearance >> Editor. Now move your cursor at the bottom of the page and click Style.CSS, paste the above code at the end of the style sheet.

Now whenever you want to embed a video in your post, use the HTML editor to add the video URL between the following div tags.

<div class="video">
<iframe width="560" height="315" src="VIDEO URL HERE" frameborder="0" allowfullscreen></iframe>

Replace this VIDEO URL HERE with your video url from the above code and that is it.

1 comment:

  1. should the css go after the responsive theme media queries? thank you!


Please Avoid Spamming. Comments will be moderated before they are published.