Make youtube videos responsive

I don't think this is necessary. Because you can already set 100% in the context's settings. And there are sites where the user can switch between full and half and such contexts. So 50% and other is also needed. But the context settings can handle that.

Go to the scald settings, click on context link next to the video line, select the representation you are using, then in the width or height type your settings.

Closing it, reopen if needed.

No, they should still be there.

Its the standard context width and height setting which you can set for each context or representation, the same place where you can set up a player for a context or representation. Its a standard scald feature, no change there.

Of course it has to be implemented in the provider as well, but in the case of the YouTube provider its done.

To illustrate my point, here is an image.

added 100% width only (no height) and the video is not responsive.

It depends on your usage. For us if we set a specific height, and width to 100% or 50%, it seemed to be a good result. Sometimes having a percentage on width and a fix height is perfectly fine for responsiveness, its not always a requirement to make the player grow in height as well when you make the site bigger in width, although if the height is fix, then that could be implemented with site specific css, where on different breakpoints the fix height could be different.
For example:

.type-video iframe {
  width: 100%;
  height: 370px;
}
.group-right {
  .type-video iframe {
    height: 220px;
  }
}

And with media queries it can be defined for specific breakpoints as well.

As far as I saw, YouTube will give you a specific height and width on the videos page only (not from v3 api unfortunately). The only thing we could get from that is the ratio of the video which could be used to dynamically change the height depending on the width with some javascript code. That is likely the only reliable solution for all aspect ratios, but since not all users can get these values, not soo good either.

Apart from javascript, there is the css solution you have quoted, however it has a few issues, namely this one:

- All videos need to be the same aspect ratio. Otherwise they'll be forced into a different aspect ratio and you'll get the "bars". Or, you'll need a toolbox of class names you can apply to adjust it which is an additional complication.

And also because it requires extra css, which would make it slightly more difficult to manage.

You can create a representation in code that does exactly what you need however. For example:

/**
 * Implements hook_scald_contexts().
 */
function [YOURMODULE]_scald_contexts() {
  $contexts['youtube_responsive_representation'] = array(
    'title' => t('YouTube Responsive Representation'),
    'description' => t('The YouTube Responsive Representation'),
    'render_language' => 'XHTML',
    'parseable' => TRUE,
    'formats' => array(
      'video' => array('passthrough'),
    ),
  );

  return $contexts;
}

/**
 * Implements hook_theme().
 */
function [YOURMODULE]_theme() {
  return array(
    'scald_youtube_responsive_player' => array(
      'variables' => array(
        'vars' => NULL,
        'atom' => NULL,
      ),
      'template' => 'scald_youtube_responsive_player',
    ),
  );
}

/**
 * Implements hook_scald_render().
 */
function [YOURMODULE]_scald_render($atom, $context, $options = array()) {
  if ($context == 'youtube_responsive_representation') {
    // Load context configuration to retrieve dimension data if present.
    $context_config = scald_context_config_load($context);
    $video_width = (!empty($atom->data['video_width'])) ? $atom->data['video_width'] : 480;
    $video_height = (!empty($atom->data['video_height'])) ? $atom->data['video_height'] : 365;
    // Allow context configuration to override video dimension variables.
    if (!empty($context_config->data['width'])) {
      $video_width = $context_config->data['width'];
    }
    if (!empty($context_config->data['height'])) {
      $video_height = $context_config->data['height'];
    }
    $query = array();
    if (!empty($atom->data['list'])) {
      $query['list'] = $atom->data['list'];
    }
    if (isset($atom->data['show_related']) && empty($atom->data['show_related'])) {
      $query['rel'] = '0';
    }
    $video_url = url(SCALD_YOUTUBE_EMBED . $atom->base_id, array(
      'query' => $query,
    ));
    return theme('scald_youtube_responsive_player', array(
      'vars' => array(
        'video_id'      => $atom->base_id,
        'video_width'   => $video_width,
        'video_height'  => $video_height,
        'video_url'     => $video_url,
        'thumbnail'     => $atom->rendered->thumbnail_source_url,
        'title'         => check_plain($atom->title),
      ),
      'atom' => $atom,
    ));
  }
}

Then you just need to copy paste the scald_youtube_player.tpl.php, and change its name to scald_youtube_responsive_player.tpl.php into your custom module's directory, where you have defined the theme hook.

Then you can change the markup as you wish, you can select this representation after cache clear for the atoms, and you can implement any css you like in this custom module. You can define a class for your css in the new template.

Then that way you can easily implement the css solution for your site.

In scald_youtube_prerender, shouldn't this be:

No, it should not. Your snippet shows how we get the width and height from the context settings, and those are not called video_width, since those are generic width and height fields, so the code for that is correct.

Also, does scald_youtube_register only get called when the atom is first created?

Actually that function is not called at all. It is just there so other modules can call it as far as I could see, but that code was not written by me, I was just updating it.

The real function that is called when you add a new atom is at scald_youtube_scald_add_form_fill

The dimensions are actually not available in the v3 api, only when the system queries the youtube video page (which seems to not work for some users so they cannot even get any dimension just the default).

So there is a default dimension, then thats changed if the system can query the youtube video page on adding the youtube video. Then the context settings width and height overrides that setting on display.

Currently there is no mechanism to update dimensions again from the youtube video page after the video has been added.

One issue could be with the isset check

    if (isset($context_config->data['width'])) {

It should be with empty, instead of isset, then if the setting is there but its empty it wont override the default to nothing.
Of course the height will still be a fix value.

Patch implements #11

Committed #12

Have you tried my suggestion to create a custom context (representation) and setting that up in middle of comment #10?

That way you would not need to customize the module, and you could just drupal_add_css your css in the render of that context.

Alternatively a player could be created, that can be set up for the editor representation, and which can override the render, but it can be a bit more complex that way since several provider uses the same entity.

I know I am digging a conversation from a year ago - but I was hoping to enable fitvids and having the videos respond responsively - which is not the case.

Anyone has a better solution today than creating a custom context?

It's weird as fitvids work for every type of video I tried with, but not with scald.. Any pointers?

Cheers,