Tuesday 24 March 2015

How to make iframe responsive



    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 !
For such more blogs you can visit to http://findnerd.com/NerdDigest/Html/

No comments:

Post a Comment