Forums

Changing the width/height of an embedded image

Permalink
Hi,

I am new to managing a site and I need to embed a virtual walkthrough from Google into my website, but whenever I do so the embeded image is very small and I would like to amend it so that the size fits across my screen so basically about 1200 x 474. The code I'm given by Google is:

<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2suk!4v1469634815319!6m8!1m7!1s0dR93LYDmREAAAQvPE9-yQ!2m2!1d50.77250338775271!2d0.1001404348737651!3f331.17!4f-5.209999999999994!5f0.4000000000000002" width="1200" height="474" frameborder="0" style="border:0" allowfullscreen></iframe>

This already has the dimensions I would like but for some reason it doesn't keep them when I add it as content, html, file, image or feature.

Any help would be greatly appreciated.

Thanks,
Salome
 
salomelamprecht replied on at Permalink Reply
Hi, is there anyone who can please help with this?
WillemAnchor replied on at Permalink Reply
WillemAnchor
Put this in a html block, it will give you some handles to get what you want. Remember screens can have different sizes...

<div class="mycontainer">
    <iframe class='myframe' src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2suk!4v1469634815319!6m8!1m7!1s0dR93LYDmREAAAQvPE9-yQ!2m2!1d50.77250338775271!2d0.1001404348737651!3f331.17!4f-5.209999999999994!5f0.4000000000000002"  frameborder="0" style="border:0" allowfullscreen></iframe> 
</div>
<style>
    .mycontainer {
        width: 1200px;
        height: 474px;  // 100vh
    }
    .myframe {
        width: 100%;
        height: 100%;
    }
</style>
salomelamprecht replied on at Permalink Reply
That's great, thank you very much. Is there any way to make this responsive so that it also works on a mobile or a tablet?
WillemAnchor replied on at Permalink Reply
WillemAnchor
Just test it a bit what best fits your needs. A few notes:

- set the width (and height) of the container to 100%
- iframes height will only be 100% if all it's parents have a height set.
- you can of course add some responsive rules
@media all and (max-width: 992px) {
}
salomelamprecht replied on at Permalink Reply
Thank you, I'll have a look at amending these.
Gondwana replied on at Permalink Reply
Gondwana
In addition to Willem's post, you may be running into a google-imposed limitation:
https://developers.google.com/maps/documentation/streetview/usage-li...

Free images are normally limited to 640x640.
salomelamprecht replied on at Permalink Reply
Thank you, I'll have a look at this too.