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.

Wordpress Tricks 9055097348930785690

Post a Comment

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


Home item

Follow by Email

WPReads.com aims to provide everything that can help you master wordpress, I am Farsab, a creative webdev who likes to spread knowledge through writing on different topics such as web development concepts, tutorials, SEO, CSS and much more . Feel free to

Popular Posts