Posted by osman on December 18, 2010 at 1:31am
7 followers
Jump to:
| Project: | Colorbox |
| Version: | 7.x-1.x-dev |
| Component: | Code |
| Category: | task |
| Priority: | minor |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
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.
| Attachment | Size |
|---|---|
| Screen shot 2010-12-17 at 5.24.08 PM.png | 146.57 KB |
Comments
#1
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
#2
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
#3
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.#4
Happening to 7.x-1.x-dev version also with Media: vimeo
#5
Try check your iframe height and width in your jquery code..
like :
$(".iframe").colorbox({ iframe: true, width: "80%", height: "85%" });
#6
#7
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.