QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Maintaining Aspect Ratio of iFrame in Responsive Site

Maintaining Aspect Ratio of iFrame in Responsive Site

responsive-image

We all embed iframe in our website. Embedding works well when we specify height and width of images in pixels. While building a responsive website we specify iframe width in percentage then their height depends on the aspect ratio. The height no way changes according to the change in width of the iframe. In this post I will provide a trick using which we can make all iframes respect their aspect ratio when width changes due to viewport resize.


CSS padding-top property

padding-top in percentage depends on the width of the containing block.

For example parent block has width of 100px. We created a block inside it and specified its padding-top to be 50%. Then the inside block will have padding-top as 50px.

Using this trick we can create a responsive aspect ratio maintaining block. And then just absolute position our iframe in the block with full width and height. Here is example code

In the above example our containing block is of 4:3 aspect ratio therefore the iFrame is also of 4:3 aspect ratio.

Conclusion

This technique can be useful while embedding youtube videos, vimeo videos etc in an responsive website.

May 14, 2014Narayan Prusty
HTML Script Tag Tutorial with ExamplesUNIX File System Permissions Tutorial

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Understanding HTML img tag
  • How To Detect Element Entered Viewport
  • Python like Multiline Strings In JavaScript
  • Sidebar for Phonegap App
  • Horizontal and vertical Centering Using CSS
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license