Simple Way to Make Your Embed Video Responsive Using Only CSS

Share This Post

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Fast Hosting as low as $2 per month

Last Updated: December 23, 2014 | Reading Time: < 1 minute

Simple way to make your Embedded video responsive within a minute, is by adding CSS rule:

[css]
.post iframe {
width: 100% !important;
}
[/css]

You can add the code into style.css if you working on WordPress based website.

Targeting Youtube video:
[css]
iframe[src*=youtube] {
width: 100% !important;
}
[/css]

Targeting Vimeo video:
[css]
iframe[src*=vimeo] {
width: 100% !important;
}
[/css]

See this demo.

Any idea? Fill the comment below

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More To Explore