in Web & Tech

Responsive Embedded Videos in Drupal 7

Eigentlich sollte ich nur kurz ein max-width: 100% für die eingebetteten Youtube-Videos hier einrichten… doch so einfach geht’s dann doch nicht — Hier die Kurzdoku, mit welchen Modulen & Libraries, Template-Overrides und Einstellungen es dann letztendlich geklappt hat. Wahrscheinlich geht es irgendwie auf viel eleganter, aber das ist mir jetzt egal, denn es funktioniert!

Eigentlich sollte ich nur kurz ein max-width: 100% für die eingebetteten Youtube-Videos hier einrichten… doch so einfach geht’s dann doch nicht — Hier die Kurzdoku, mit welchen Modulen & Libraries, Template-Overrides und Einstellungen es dann letztendlich geklappt hat. Wahrscheinlich geht es irgendwie auf viel eleganter, aber das ist mir jetzt egal, denn es funktioniert!

1.) Modul: Video Filter

Ist bei mir für die Youtube-Einbindung zuständig, funktioniert einfach als Filter, der in Texten nach [video:http://youtube.com/blablabla] sucht und den Link dann in einen Embed-Code umwandelt. ACHTUNG: der folgende Kram funktioniert nur, wenn man in den Einstellungen von video_filter “Use HTML5” auf “No” setzt. Wider Erwarten hat das keine Auswirklung auf die Lauffähigkeit der Videos auf iDevices.

Der Video-Filter muss in den benötigten Textformaten aktiviert und konfiguriert werden!
http://drupal.org/project/video_filter

2.) Theme Overide für Modul Video Filter

Wir brauchen einen das Video umgebenden Container. Ein solcher wird vom Video Filter nicht erzeugt. Das kann aber mit einem Override in der template.php ganz einfach ergänzt werden:

function THEMENAME_video_filter_flash($variables) {
  $output = '';
  $video = $variables['video'];
  $params = isset($variables['params']) ? $variables['params'] : array();

  // Create classes
  $classes = array(
    'video-filter',
    'video-' . $video['codec']['codec_name'],  // Adds codec name
  );

  // Adds alignment
  if (isset($video['align'])) {
    $classes[] = 'video-' . $video['align'];
  }

  // First match is the URL, we don't want that as a class.
  unset($video['codec']['matches'][0]);
  foreach ($video['codec']['matches'] AS $match) {
    $classes[] = 'vf-' . strtolower(preg_replace('/[^a-zA-Z0-9]/', '', $match));
  }
  $output .= '<div class="video-wrapper"><object class="' . implode(' ', $classes) . '" type="application/x-shockwave-flash" ';
  $output .= 'width="' . $video['width'] . '" height="' . $video['height'] . '" data="' . $video['source'] . '">' . "\n";
  $defaults = array(
    'movie' => $video['source'],
    'wmode' => 'transparent',
    'allowFullScreen' => 'true',
  );
  $params = array_merge($defaults, (is_array($params) && count($params)) ? $params : array());
  foreach ($params as $name => $value) {
    $output .= '  <param name="' . $name . '" value="' . $value . '" />' . "\n";
  }
  $output .= '</object></div>' . "\n";
  return $output;
}

3.) Modul und zugehörige JS-Libarary FitVids

Einfach installieren und JS-Library nach sites/all/libraries/fitvids kopieren.
Modul: http://drupal.org/project/fitvids
Library: https://github.com/davatron5000/FitVids.js

In den Einstellungen von FitVids (admin/config/media/fitvids) wird jetzt der in der template.php definierte Wrapper als jQuery-Selector unter “Video Containers” angegeben:
.video-wrapper

Write a Comment

Comment