0

In WordPress page in put google map Embed Code like this

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d805184.6317849847!2d144.49269473369353!3d-37.97123702210555!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad646b5d2ba4df7%3A0x4045675218ccd90!2sMelbourne+VIC!5e0!3m2!1sen!2sau!4v1501764505542" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

After publish, this part dispear.

  width="600" height="450"

So, map show up in a very small size, about 200px X 100px

Improve this question
5
  • 1
    WordPress is going to strip out iframes for security reasons, you'll want to use a shortcode instead – Tom J Nowell♦ Aug 3 '17 at 21:56
  • Sorry, what kind of shortcode, where can I find it? – user18787 Aug 4 '17 at 0:38
  • Here are some details about shortcodes: codex.wordpress.org/Shortcode_API – Greeso Aug 4 '17 at 2:02
  • something wrong in your style.css or theme other wise it's fine with my wordpress setup – Jignesh Patel Aug 4 '17 at 3:59
  • @user18787 WP doesn't come with such a shortcode out of the box, eitherway you can't use HTML embed codes in WP, instead use OEmbed or shortcodes ( you will need to add support yourself, either by adding a shortcode, or an oembed provider ) – Tom J Nowell♦ Aug 4 '17 at 18:52
0

Try with css styling

iframe {
  width:100%;
  height:450px;
}

or page specific css

.page iframe {
  width:100%;
  height:450px;
}
Improve this answer
0

There is a way to embed your iframe responsive - meaning it takes the full available width of it's container:

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;  // in case of problems add height: auto; after this line
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Now embed your iframe like this:

<div class="embed-container">
    <iframe src="https://www.yourURL.tld" width="560" height="315" frameborder="0"></iframe>
</div>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.