diff --git a/css/youtube.css b/css/youtube.css new file mode 100644 index 0000000..0bb8230 --- /dev/null +++ b/css/youtube.css @@ -0,0 +1,21 @@ +/** + * @file + * CSS for the YouTube Field module. + */ + +/* Takes effect when a field's 'size' display setting is 'responsive'. */ +.youtube-container--responsive { + overflow: hidden; + position: relative; + padding-bottom: 56.25%; + height: 0; +} + +.youtube-container--responsive iframe { + border: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} diff --git a/youtube.inc b/youtube.inc index 2096287..09d90ab 100644 --- a/youtube.inc +++ b/youtube.inc @@ -14,6 +14,7 @@ function youtube_size_options() { '480x360' => '480px by 360px', '640x480' => '640px by 480px', '960x720' => '960px by 720px', + 'responsive' => 'responsive (full-width)', 'custom' => 'custom', ); } @@ -23,7 +24,11 @@ function youtube_size_options() { */ function youtube_get_dimensions($size = NULL, $width = NULL, $height = NULL) { $dimensions = array(); - if ($size == 'custom') { + if ($size == 'responsive') { + $dimensions['width'] = '100%'; + $dimensions['height'] = '100%'; + } + elseif ($size == 'custom') { $dimensions['width'] = (int) $width; $dimensions['height'] = (int) $height; } diff --git a/youtube.info b/youtube.info index 1767931..d0b556d 100644 --- a/youtube.info +++ b/youtube.info @@ -5,6 +5,7 @@ core = 7.x dependencies[] = field dependencies[] = image dependencies[] = file +stylesheets[all][] = css/youtube.css ; Information added by drupal.org packaging script on 2012-09-14 version = "7.x-1.0" core = "7.x" diff --git a/youtube.theme.inc b/youtube.theme.inc index 48da8a7..d08bad3 100644 --- a/youtube.theme.inc +++ b/youtube.theme.inc @@ -45,6 +45,10 @@ function theme_youtube_video($variables) { height="' . $dimensions['height'] . '" src="' . $src . '" frameborder="0" allowfullscreen>'; + if ($size == 'responsive') { + $output = '
' . $output . '
'; + } + return $output; }