MAKE IFRAME RESPONSIVE CODE
The iFrame itself is styled with the following CSS code :Ībsolute positioning must be used because the containing element has a height of 0.
Setting overflow to hidden ensures that any content flowing outside of this element will be hidden from view. The width will automatically resize with the responsive element included in the wrapping div. The height is set to 0 because padding-bottom gives the element the height it needs. The padding-bottom value is calculated out of the aspect ratio of the iFrame, which in this case is 480 / 640 = 75%. Setting the position to relative lets us use absolute positioning for the iframe itself. iframe_container class in the style sheet : The containing wrapper is styled with the. To make embedded content responsive, you need to add a containing wrapper around the iframe : Unfortunaltely you can’t fix this in your css style sheet. Wihtout these parameters, the iframe will disappear because it would have no dimensions. When you embed content from an external source with an iFrame, you must include width and height attributes. Other elements are Image Maps which are lists of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations. Among these are iFrames, which you may need to use when embedding content from external sources. Some HTML elements don’t work with responsive layouts.
0 kommentar(er)
