Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make iframe responsive

    • 0
    • 4
    • 0
    • 1
    • 8
    • 0
    • 0
    • 0
    • 8.94k
    Comment on it

    Hello reader !

    How to make responsive iframe. We all are face this problem normally so there is an example and i hope it will helps you.

    CSS :-

    .wrapper {
        width: 50%;
    }
    
    .container {
        height: 0;
        width: 100%;
        padding-bottom: 50%;
        overflow: hidden;
        position: relative;
    }
    
    .container iframe {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
    
    }
    

    HTML :-

    <div class="wrapper">
        <div class="container">
            <iframe src="there is path of your iframe"></iframe> 
        </div>
    </div>
    

    You can also use media queries. I hope It will helps you.

    Thanx you !

 8 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: