In this snippet, you can learn how to create a responsive iframe with CSS. First, let’s see how a simple iframe looks like and then, we’ll show how to make it responsive.
Example of creating a simple tag:
html> html> head> title>Title of the document title> head> body> iframesrc="https://www.w3docs.com"> iframe> body> html>
It is by default 300×150 pixels in size. That’s why very often we use the width and height attributes to set different size of an iframe.
Next, we’ll use CSS to make the iframe responsive. Let’s try our example on Youtube. Here are the steps to follow.
Create HTML
Go on Youtube, click on the «share» button under the video and then «embed» it to copy the link in your HTML code.
Remove the sizes defined automatically as we’re going to change them.
Place your iframe in a element, which is important for sizing the iframe. Add a class attribute to it.
Use the class , src , gesture , and allow attributes with the element.
div iframe >iframe" src="https://www.youtube.com/embed/UF8uR6Z6KLc" gesture="media" allow="encrypted-media" allowfullscreen>
Add CSS
Style the «wrap-element» class by setting the position property to «relative», the overflow to «hidden» and specifying the padding-top property. In our example, we want to keep the ratio of 56.26% (height 9 ÷ width 16) as this is the default ratio for YouTube videos. However, you are free to use other ratios as well.
Style the «wrapped-iframe» class by specifying its position as «absolute» and setting the top and left properties to 0 so as to position the iframe at the center of the container. Set also the width and height properties to «100%» and add a border.
Some CSS frameworks have predefined classes that will do exactly the same as described above, but in each case, you need to create a wrapping element to give it a certain class.
Responsive Iframe with Bootstrap
In Bootstrap 3.2 and over, you should use the predefined class «embed-responsive» and an aspect ratio class modifier like «embed-responsive-16by9», which will add padding-top with different percentages depending on the given modifier class. Then, give your iframe the «embed-responsive-item» class.
Iframes are often used to embed other web pages into a current page, but it can be a challenge to apply CSS styles to the content within an iframe. There are several methods to apply CSS to an iframe, but each has its own limitations and considerations. Here are some ways to apply CSS to iframes:
Method 1: Inline Style Attribute
To apply CSS to an iframe using the inline style attribute, you can follow these steps:
That’s it! The CSS styles defined in the «iframe-style.css» file will be applied to the content of the iframe.
Here is the complete code for the iframe page:
DOCTYPEhtml>html>head>linkrel="stylesheet"type="text/css"href="iframe-style.css">head>body>h1>Hello World!h1>p>This is an example of an iframe.p>body>html>
And here is the complete code for the parent page:
DOCTYPEhtml>html>head>title>Parent Pagetitle>head>body>h1>Welcome to the Parent Pageh1>iframesrc="iframe-page.html"allowfullscreenseamless>iframe>body>html>
Method 4: CSS in the Parent Page Targeting the Iframe
To apply CSS to an iframe using CSS in the parent page, you can use the contentDocument property of the iframe to target its contents. Here are the steps to do it:
To target elements inside the iframe, you can use the contentDocument property to get the iframe’s document object. Here’s an example that changes the background color of a div inside the iframe:
That’s it! With these steps, you can easily apply CSS styles to an iframe using CSS in the parent page.
Method 5: CSS in the Iframe Page Targeting the Parent Page
To apply CSS to an iframe from the parent page, you can use the contentDocument property to access the iframe’s document object and then manipulate its CSS styles using JavaScript. Here is an example code snippet:
In this example, we have an iframe element with an ID of myIframe that loads the iframe.html file. In the parent page, we have defined some CSS styles for the iframe element itself.
To apply additional CSS styles to the iframe’s document, we first get a reference to the iframe element using getElementById . We then use the contentDocument property to get the iframe’s document object. If the iframe is from a different domain, we need to use contentWindow.document instead.
Next, we create a new style element using createElement and set its textContent property to the CSS styles we want to apply to the iframe’s document. In this case, we are setting the background color of the body element to #f0f0f0 .
Finally, we append the new style element to the head element of the iframe’s document using appendChild .
With this approach, you can apply any CSS styles you want to the iframe’s document from the parent page. Just make sure to wait for the iframe to load before trying to access its document object.
Create an iframe that will keep the aspect ratio (4:3, 16:9, etc.) when resized:
What is aspect ratio?
The aspect ratio of an element describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century), and 16:9 (universal for HD television and European digital television, and for YouTube videos).
How To — Responsive Iframes
Step 1) Add HTML:
Use a container element, like , and add the iframe inside of it:
Example
Step 2) Add CSS:
Add a percentage value for padding-top to maintain the aspect ratio of the container DIV. The following example will create an aspect ratio of 16:9, which is the default aspect ratio of YouTube videos.
/* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; >