Iframe responsive

Iframe elements aren't adaptive by default. However, you can make them responsive to fit all types of screens by using CSS.
Here is a sample of how you can make iframe responsive:

.responsive-iframe {
    position: relative;
    padding-bottom: 56.25%; /* Aspect ratio */
    height: 0;
    overflow: hidden;

.responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

<div class="responsive-iframe">
    <iframe src="your-iframe-link" frameborder="0"></iframe>

in this example, replace "your-iframe-link" with the URL you want to embed. The aspect ratio in this sample is for a standard 16:9 video. If you have a different aspect ratio, you'd need to adjust the percentage in `padding-bottom` accordingly.

Iframe responsive

Please note that not all websites allow their pages to be embedded in an iframe due to security concerns. You need to ensure that the website you're linking to permits iframe embedding.


© Copyright - BongSeiha
Added Successfully

Type above and press Enter to search.