iframe creates vertical & horizantal scrollbars [#1001776]

I use Colorbox together with emfield 6.x-2.4 and Media: YouTube 6.x-1.2.

Images in Colorbox works great. But the YouTube videos generate scrollbars inside the box, which make it harder to access player controls.

The easiest fix I could find is adding overflow: hidden; to #cboxLoadedContent iframe selector in colorbox_default_style.css (line 30):
From:

#cboxLoadedContent iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

To:

#cboxLoadedContent iframe {
    border: 0 none;
    display: block;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

I only tested with Chrome 8.0 and Firefox 3.6 both on MacOS X.

Comment	File	Size	Author
	Screen shot 2010-12-17 at 5.24.08 PM.png	146.57 KB	osman

Comments

Comment #1

rajmataj commented 2 April 2011 at 03:46

Best not to adjust the styles in the module, but you can move a copy to your theme's directory, making sure to select 'None' from the Colorbox theme dropdown in the Admin area. Also, you'll need to tell you .info file of the new .css file.

Alternatively, to override #cboxLoadedContent, which is an inline style, you could use the same declaration in your 'regular' .css file, adding !important after the declaration, which tells the browser to put this in priority over inline styles.

~Raj
http://purewebmedia.biz

Comment #2

KoCo commented 1 February 2012 at 23:36

Overriding this also worked for me, using an object with
Drupal 7 - Media - Media vimeo - Colorbox Media - Colorbox

#cboxLoadedContent iframe {
    border: 0 none;
    display: block;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

in local.css solved the issue where scroll bars appeared when embedding Vimeo or Youtube media in a colorbox.
This fixed all standard styles, except example 2 with the black border, which just hides a bit of the border.

thx
Koen

Comment #3

goldlilys commented 10 February 2012 at 01:04

According to http://stackoverflow.com/questions/1691873/safari-chrome-webkit-cannot-h... may have the solution to fix chrome/safari problem

Particularly adding <iframe scrolling="no"> since i tried the other solutions and they didn't work. However, I'm not sure exactly sure where to add scrolling="no" on the module. Please add this to next release or can someone offer a patch? Thanks.

Comment #4

goldlilys commented 10 February 2012 at 18:38

Version:

6.x-1.0-beta9

» 7.x-1.x-dev

Happening to 7.x-1.x-dev version also with Media: vimeo

Comment #5

Jiteshmahale commented 23 March 2012 at 06:26

Try check your iframe height and width in your jquery code..

like :

$(".iframe").colorbox({ iframe: true, width: "80%", height: "85%" });

Comment #6

frjo commented 9 September 2012 at 15:47

Category:

bug

» task

Comment #7

nodecode commented 17 December 2012 at 22:11

Is this by chance a forgotten issue? It appears to be a task assigned to nobody.

It's affecting a number of my sites and I'd rather not override colorbox css if this is expected to be resolved in an upcoming release. Thanks.

Comment #8

shock-j commented 14 January 2014 at 21:44

Here is the problem with colorbox iframes:
It does not output marginheight=0 and marginwidth=0 parameters. These parameters get passed to the body of the containing HTML document. If your containing HTML doc does not have the margins set to 0 via CSS, then you get the inherent default margins that the body tag has and this creates your scrollbars.

Simply adding these parameters to the iframe output should solve this issue.