I'm running a combination of Colorbox 6.x-1.x-dev (as of yesterday), Emfield 6.x-2.0, Media Vimeo 6.x-1.0 and Media YouTube 6.x-1.1 to provide a lightbox style view of videos stored as Emfield CCK fields. The Colorbox library is up to date.

Problem: the box is not resized properly:

With Youtube, and with Vimeo in legacy/flash mode the box has the correct width, but in Firefox, the #cboxContent height is close to zero – most of the time. It seems like it fails intermittently depending on in which order elements are loaded. In Safari, I get the correct height every time.

With Vimeo in universal/iframe mode the #cboxContent div gets the width of 200 px and different heights in Safari and Firefox. The height is never zero however.

If I check the output of Emfield's callbacks for the video thumbnail links (the urls that Colorbox loads) I can see that the videos are in fact displayed in the correct size, so the issue is either with the Colorbox library, the Colorbox module, or with Emfield's Colorbox integration. It seems like Colorbox can't successfully detect the size of the contained content somehow.

Colorbox (the library) has the option of explicitly setting the width and height when defining each colorbox. Maybe Colorbox/Emfield should leverage that when it comes to embedded video, iframes and such, if it's tricky to detect the dimensions of that kind of content? Emfield could maybe add some attribute/class to the links specifying the desired size.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

frjo’s picture

I believe this needs to be fixed in the Embedded Media Field module. But lets keep it here until we have a good solution.

Try out this in your template.php.

function [your_theme_name]_emvideo_colorbox($field, $item, $formatter, $node, $options = array()) {
  $options['modal'] = 'colorbox';
  $width = ($formatter == 'video_replace_preview') ? $field['widget']['preview_width'] : $field['widget']['video_width'];
  $height = ($formatter == 'video_replace_preview') ? $field['widget']['preview_height'] : $field['widget']['video_height'];
  $colorbox_settings = array(
    'innerWidth' => $width + 16,
    'innerHeight' => $height + 32,
    'iframe' => true,
  );
  drupal_add_js(array('colorbox' => $colorbox_settings), 'setting');

  return theme('emvideo_modal_generic', $field, $item, $formatter, $node, $options);
}

What it does is sending the width and height to the Colorbox plugin via js settings. It seems to work when I test it in my local environment.

Another option is to change the Embedded Media Field module to use the "colorbox-load" feature instead. It will take width and height as queries. I think this might be a cleaner solution.

Try out these two in your template.php

function [your_theme_name]_emvideo_colorbox($field, $item, $formatter, $node, $options = array()) {
  $options['modal'] = 'colorbox-load';  // Only changing colorbox to colorbox-load
  return theme('emvideo_modal_generic', $field, $item, $formatter, $node, $options);
}
function [your_theme_name]_emvideo_modal_generic($field, $item, $formatter, $node, $options = array()) {
  $title = isset($options['title']) ? $options['title'] : (isset($node->title) ? $node->title : (isset($node->node_title) ? $node->node_title : (isset($field['widget']['thumbnail_link_title']) ? $field['widget']['thumbnail_link_title'] : variable_get('emvideo_default_thumbnail_link_title', t('See video')))));
  $thumbnail = isset($options['thumbnail']) ? $options['thumbnail'] : theme('emvideo_video_thumbnail', $field, $item, 'video_thumbnail', $node, TRUE, $options);
  $width = ($formatter == 'video_replace_preview') ? $field['widget']['preview_width'] : $field['widget']['video_width'];
  $height = ($formatter == 'video_replace_preview') ? $field['widget']['preview_height'] : $field['widget']['video_height'];
  $destination = 'emvideo/modal/'. $node->nid .'/'. $width .'/'. $height .'/'. $field['field_name'] .'/'. $item['provider'] .'/'. $item['value'];
  $link_class = 'emvideo-thumbnail-replacement emvideo-modal-' . $options['modal'] .' '. $options['modal'];
  $attributes = array(
    'attributes' => array(
      'title' => $title,
      'class' => $link_class,
    ),
    'query' => NULL,
    'fragment' => NULL,
    'absolute' => FALSE,
    'html' => TRUE,
  );
  if ($options['modal'] == 'lightbox2') {
    $attributes['attributes']['rel'] = 'lightframe['. $field['type_name'] .'|width:'. ($width + 16) .'; height:'. ($height + 16) .';]';
  }
  else if ($options['modal'] == 'shadowbox') {
    $attributes['attributes']['rel'] = 'shadowbox['. $field['type_name'] .'];width='. ($width + 5) .';height='. ($height + 5);
    // Shadowbox needs a .php extension so it knows to open as an iFrame.
    $destination .= '/index.php';
  }
  else if ($options['modal'] == 'colorbox-load') {
    $attributes['query'] = 'width='. ($width + 16) .'&height='. ($height + 32) .'&iframe=true';
  }

  if (($options['modal'] == 'lightbox2') && function_exists('lightbox2_add_files')) {
    lightbox2_add_files();
  }

  static $added_js;
  if (!isset($added_js)) {
    // Add the play button image overlay.
    drupal_add_js(array('emvideo' => array('thumbnail_overlay' => variable_get('emfield_thumbnail_overlay', TRUE))), 'setting');
    drupal_add_js(drupal_get_path('module', 'emvideo') . '/emvideo.thumbnail-replacement.js');
    drupal_add_css(drupal_get_path('module', 'emvideo') . '/emvideo.thumbnail-replacement.css');
    $added_js = TRUE;
  }
  $class = 'emvideo-modal emvideo-'. $options['modal'];
  if ($options['wrapper-class']) {
    $class .= ' '. $options['wrapper-class'];
  }
  $output = '<div class="'. $class .'">'. l($thumbnail, $destination, $attributes) .'</div>';
  return $output;
}

In the second theme function we just add:

  else if ($options['modal'] == 'colorbox-load') {
    $attributes['query'] = 'width='. ($width + 16) .'&height='. ($height + 32) .'&iframe=true';
  }

Make sure you active "colorbox-load" in the Colorbox settings before testing this.

Do they work and which solution do you prefer? They are both simple patches for the Embedded Media Field module.

Updated 2010-09-23 to add "iframe=true" to the query/settings.

frjo’s picture

Status: Active » Needs review
FileSize
1.25 KB

Here is the second solution as a patch for the Embedded Media Field module.

A tips to the module maintainer is to make it possible to set $attributes and $destination in the "theme_emvideo_*box" functions so theme_emvideo_modal_generic can be made cleaner.

zoo33’s picture

Status: Needs review » Needs work

OK, so the first method doesn't seem to work completely. I get the same problem with universal/iframe Vimeo videos being too small. YouTube seems to work though!

The second method looks solid in terms of respecting the width and height. I have another problem with it though, which might be considered local or theme related.

I'm using a custom Colorbox style (which we're going to contribute once it's finished) that doesn't have any padding around the content. The code above assumes there should be a 16x32 px addition to the size of the box, which is probably correct for the default style, but it doesn't work with our custom style. It would be nice if it was possible to avoid hard-coding this into the module, but maybe that's unavoidable? Another Colorbox setting perhaps?

So I changed the code above to skip the added pixels, but then I ended up with scroll bars. I guess I'll be able to get rid of those with CSS and/or by tweaking the theme function, but I'm wondering if these are problems that can be addressed in the module itself rather than on a per-site basis?

Thanks for your help! Setting to "needs work" for now.

zoo33’s picture

OK, progress!

I think I solved my problem with a small, simple change to the CSS. In the following snippet:

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

...I just removed the width and height statements, which seems to have been what made my boxes shrink. I guess there's confusion about what 100% represents in this context.

I don't know the background for those lines of code, so I'm not sure if this breaks something else. I guess this would have to be properly tested with the default style as well before committing it.

Edit: To be clear, it's working now without any changes to any theme function, just the small css change.

frjo’s picture

Title: Incorrect box size with embedded video » Set correct width and height for Colorbox in Embedded Video Field module
FileSize
1.25 KB

zoo33: I noticed that the emvideo iframe load all CSS and JS like a normal Drupal page. Is that really needed?

If you have some styling for the body tag in your theme it will be active in the iframe as well.

With this revised patch and the following CSS added to my theme I got some good results. Right sized window, no scrollbars etc.

body.emvideo-modal-iframe {
  margin: 0;
  padding: 0;
}

P.S. I have realised that the default style doesn't work well with videos, the popup title covers the video controls. Need to fix that somehow. Suggestions welcome, but do it in a new issue.

rjbrown99’s picture

I'm also having this issue, although it seems that part of the patch from #5 may have been committed.

My issue is with the emfield+emvideo module with the media:vimeo support. I'm getting the colorbox, but it has visible scrollbars in both Firefox and Chrome. I added an overflow: hidden; tag to body.emvideo-modal-iframe and that works. Just thought it might be worth mentioning.

marktheshark’s picture

Has this been fixed?

Still have scrollbars with 6.x-1.0-beta11.

Btw have you had success getting next/previous links to show for embedded video galleries?

longwave’s picture

I use overflow: hidden and remove the pixel additions in a theme override, changing:

  else if ($options['modal'] == 'colorbox-load') {
    $attributes['query'] = 'width='. ($width + 4) .'&height='. ($height + 7) .'&iframe=true';
  }

to

  else if ($options['modal'] == 'colorbox-load') {
    $attributes['query'] = 'width='. $width .'&height='. $height .'&iframe=true';
  }

This seems to work, the videos fill the space exactly with no visible scrollbars.

marktheshark’s picture

There appears to be a patch for emfield for this:

I'll give it a try and post back.

Bartezz’s picture

Tried the (revised) patch mentioned by marktheshark and this solved the issues for me!

frjo’s picture

Status: Needs work » Closed (won't fix)

Closing old issues that doesn't seems to effect a lot of users.