Google maps and YouTube embed [#1844182]

I tried embedding the following code into a block which is put in region sidebar-first. However the height is not applied.

<p><iframe frameborder="0" height="600" marginheight="0" marginwidth="0" scrolling="no" src="http://maps.google.be/...";output=embed" width="300"></iframe><small><a href="http://maps.google.be/..." style="text-align: left; color: rgb(0, 0, 255);">View Larger Map</a></small></p>

I tried embedding this code in a normal page and still the width and height are not respected. The map is displayed with a width of 960 px. However when i look in the preview mode, the map is displayed as requested.

In another theme the map is also displayed as requested.

Comments

Comment #1

Aonoa CreditAttribution: Aonoa commented 20 November 2012 at 17:41

Title:	Google maps embed	» Google maps and YouTube embed
Category:	support	» bug
Priority:	Normal	» Major

I have the exact same problem with embedding media, like YouTube video's. The height/width is being ignored and we're left with wide and narrow video's in our site. It's actually quite the disturbance for us, since we had a lot of video's already posted and now they can't really be looked at on our site with this theme. It was working fine with previous versions of corporate clean, and other themes.

Thank you for your time.

Comment #2

gtsopour CreditAttribution: gtsopour commented 20 November 2012 at 17:51

Assigned:	Unassigned	» gtsopour
Status:	Active	» Needs review

Hello,
please edit your style.css (sites/all/themes/corporateclean/style.css) and make the following change at the bottom of your stylesheet:

Change from

/**
 * Responsive embed, object, iframe
 */
embed, object, iframe { width: 100%; height: auto; }

/**
 * Responsive embed, object, iframe
 */
embed, object, iframe { max-width: 100%; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

I will commit this fix immediately.

Thanks
/George

Comment #3

Zwappe CreditAttribution: Zwappe commented 20 November 2012 at 23:32

Hey,

I editied it and indeed the width is adjustable with the iframe code. However the height isn't as requested. I tried the same thing as with the width:

max-height: 100%;

then it works as it should be: the height adapts to the requested height. Is there any reason why this should not be max-height?

What is the logic behind "height: auto" as I do not see it adapt to the browser?

Thank you already!

Comment #4

mntash CreditAttribution: mntash commented 26 November 2012 at 20:50

Hi, just wanted to note this issue is very similar to an issue I had: https://drupal.org/node/1844792

In that case, I changed height: auto to height: 100%

Not sure if it should be height or max-height...

Thanks to Zwappe and gtsopour for their help!

Comment #5

Unique Vine CreditAttribution: Unique Vine commented 25 January 2013 at 21:55

Replace

/**
* Responsive embed, object, iframe
*/
embed, object, iframe { width: 100%; height: auto; }

/**
* Responsive embed, object, iframe
*/
embed, object, iframe { max-width: 100%; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

on the sites/all/themes/corporateclean/style.css with the following below. It works when the height is not defined on this css sheet.

embed, object, iframe {
width: 100% !important;

}