WordPress.org

Forums

Trying to add responsive to an iframe embedded into a page (Cross domain) (1 post)

  1. halben
    Member
    Posted 1 year ago #

    NOTE: The embedded iframe is a contact form.

    I am trying to make the embedded iframe responsive in a contact page. This would be a cross browser iframe.

    What I did was I went to edit page, inserted the iframe code:

    <div id="embed-container">
    <iframe src="http://other-domain.com/contact-us.html" height="650" width="500" frameborder="0" scrolling="no"></iframe>
    </div>

    CSS:

    #embed-container {
    	border: 1px dashed red;
    	position: relative;
    	padding-bottom: 65.25%;
    	padding-top: 30px;
    	height: 0;
    	overflow: hidden;
    }
    #embed-container iframe, #embed-container object, #embed-container embed {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }

    The container is responsive but the iframe is not. Have any one done this before? If so, can you please assist me?

    Thanks,
    Hal

Topic Closed

This topic has been closed to new replies.

About this Topic