"dropdown",
"dropdown_menu",
"equalizer",
- "flex_video",
+ "responsive_embed",
"interchange",
"label",
"magellan",
equalizer:
js: equalizer
-flex_video:
- sass: flex-video
-
interchange:
js: interchange
js_utils:
progress_element:
sass: progress-element
+responsive_embed:
+ sass: responsive-embed
+
responsive_menu:
js: responsiveMenu
js_utils:
@import 'examples/motion-ui';
@import 'examples/off-canvas';
@import 'examples/orbit';
+@import 'examples/responsive-embed';
@import 'examples/reveal';
@import 'examples/top-bar';
--- /dev/null
+// Responsive Embed
+
+.panorama {
+ @include responsive-embed(256 by 81);
+}
+++ /dev/null
----
-title: Flex Video
-description: Wrap embedded videos from YouTube, Vimeo, and others in a flex video container to ensure they maintain the correct aspect ratio regardless of screen size.
-sass: scss/components/_flex-video.scss
----
-
-Embedded videos won't maintain their aspect ratio as the width of the screen changes. To avoid squished videos, wrap them in a container with the class `.flex-video`.
-
-```html_example
-<div class="flex-video">
- <iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe>
-</div>
-```
-
----
-
-The default ratio is 4:3. Add the `.widescreen` class to change it to 16:9.
-
-```html_example
-<div class="flex-video widescreen">
- <iframe width="420" height="315" src="https://www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
-</div>
-```
-
----
-
-Embedded Vimeo videos are special snowflakes of their own. Add the `.vimeo` class to a flex video container that wraps a Vimeo embed.
-
-```html_example
-<div class="flex-video widescreen vimeo">
- <iframe src="http://player.vimeo.com/video/60122989" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
-</div>
-```
<h4>Media</h4>
<ul>
<li><a href="badge.html">Badge</a></li>
- <li><a href="flex-video.html">Flex Video</a></li>
+ <li><a href="responsive-embed.html">Responsive Embed</a></li>
<li><a href="label.html">Label</a></li>
<li><a href="orbit.html">Orbit</a></li>
<li><a href="progress-bar.html">Progress Bar</a></li>
---
-## Flex Video
+## Responsive Embed
```html_example
-<div class="flex-video">
+<div class="responsive-embed">
<iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe>
</div>
```
--- /dev/null
+---
+title: Responsive Embed
+description: Wrap embedded content like videos, maps, and calendars in a responsive embed container to maintain the correct aspect ratio regardless of screen size.
+sass: scss/components/_responsive-embed.scss
+---
+
+To make sure embedded content maintains its aspect ratio as the width of the screen changes, wrap the `iframe`, `object`, `embed`, or `video` in a container with the `.responsive-embed` class.
+
+```html_example
+<div class="responsive-embed">
+ <iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen></iframe>
+</div>
+```
+
+---
+
+The default ratio is 4:3. Add the `.widescreen` class to change it to 16:9.
+
+```html_example
+<div class="responsive-embed widescreen">
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/WUgvvPRH7Oc" frameborder="0" allowfullscreen></iframe>
+</div>
+```
+
+---
+
+If you need to embed content with other aspect ratios, such as 256:81, the `responsive-embed()` mixin makes it easy to add your own custom classes.
+
+```scss
+.panorama {
+ @include responsive-embed(256 by 81);
+}
+```
+
+```html_example
+<div class="panorama">
+ <iframe width="1024" height="315" src="https://www.youtube.com/embed/bnD9I24EL_4" frameborder="0" allowfullscreen></iframe>
+</div>
+```
<li class="docs-nav-title">Media</li>
<li{{#ifpage 'badge'}} class="current"{{/ifpage}}><a href="badge.html">Badge</a></li>
- <li{{#ifpage 'flex-video'}} class="current"{{/ifpage}}><a href="flex-video.html">Flex Video</a></li>
+ <li{{#ifpage 'responsive-embed'}} class="current"{{/ifpage}}><a href="responsive-embed.html">Responsive Embed</a></li>
<li{{#ifpage 'label'}} class="current"{{/ifpage}}><a href="label.html">Label</a></li>
<li{{#ifpage 'orbit'}} class="current"{{/ifpage}}><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
<li{{#ifpage 'progress-bar'}} class="current"{{/ifpage}}><a href="progress-bar.html">Progress Bar</a></li>
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
-@include foundation-flex-video;
+@include foundation-responsive-embed;
@include foundation-label;
@include foundation-media-object;
@include foundation-menu;
@include foundation-top-bar;
```
-Note: For now there is a Motion-UI library added in the package (css, js files). It is needed for some Foundation plugins. Maybe in the future it will be separated package.
+Note: For now there is a Motion-UI library added in the package (css, js files). It is needed for some Foundation plugins. Maybe in the future it will be separated package.
### 3. Overwrite Foundation settings
#### Known problems
-1. **Conflicts with Meteor events**.
+1. **Conflicts with Meteor events**.
Solution: Try to always wrap Foundation's DOM nodes into another ones in your Meteor templates. This applies only to nodes on which are initialized Foundation's JS plugins and which are the first nodes in the Meteor templates with attached custom Meteor events. For more details read the last comments here: [#7248](https://github.com/zurb/foundation-sites/issues/7248)
-
'scss/components/_drilldown.scss',
'scss/components/_dropdown-menu.scss',
'scss/components/_dropdown.scss',
- 'scss/components/_flex-video.scss',
'scss/components/_flex.scss',
'scss/components/_float.scss',
'scss/components/_label.scss',
'scss/components/_orbit.scss',
'scss/components/_pagination.scss',
'scss/components/_progress-bar.scss',
+ 'scss/components/_responsive-embed.scss',
'scss/components/_reveal.scss',
'scss/components/_slider.scss',
'scss/components/_sticky.scss',
+++ /dev/null
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group flex-video
-////
-
-/// Margin below a flex video container.
-/// @type Number
-$flexvideo-margin-bottom: rem-calc(16) !default;
-
-/// Padding used to create a 4:3 aspect ratio.
-/// @type Number
-$flexvideo-ratio: 4 by 3 !default;
-
-/// Padding used to create a 16:9 aspect ratio.
-/// @type Number
-$flexvideo-ratio-widescreen: 16 by 9 !default;
-
-/// Creates a percentage height that can be used as padding in a flex video container.
-/// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`.
-/// @return {Number} A percentage value that can be used as the `padding-bottom` parameter of a flex video container.
-@function flex-video($ratio) {
- $w: nth($ratio, 1);
- $h: nth($ratio, 3);
- @return $h / $w * 100%;
-}
-
-/// Creates a flex video container.
-/// @param {List} $ratio [$flexvideo-ratio] - Ratio to use for the container, formatted as `x by y`.
-@mixin flex-video($ratio: $flexvideo-ratio) {
- position: relative;
- height: 0;
- padding-bottom: flex-video($ratio);
- margin-bottom: $flexvideo-margin-bottom;
- overflow: hidden;
-
- iframe,
- object,
- embed,
- video {
- position: absolute;
- top: 0;
- #{$global-left}: 0;
- width: 100%;
- height: 100%;
- }
-}
-
-@mixin foundation-flex-video {
- .flex-video {
- @include flex-video;
-
- &.widescreen {
- padding-bottom: flex-video($flexvideo-ratio-widescreen);
- }
-
- &.vimeo {
- padding-top: 0;
- }
- }
-}
--- /dev/null
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group responsive-embed
+////
+
+/// Margin below a responsive embed container.
+/// @type Number
+$responsive-embed-margin-bottom: rem-calc(16) !default;
+
+/// Padding used to create a 4:3 aspect ratio.
+/// @type Number
+$responsive-embed-ratio: 4 by 3 !default;
+
+/// Padding used to create a 16:9 aspect ratio.
+/// @type Number
+$responsive-embed-ratio-widescreen: 16 by 9 !default;
+
+/// Creates a percentage height that can be used as padding in a responsive embed container.
+/// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`.
+/// @return {Number} A percentage value that can be used as the `padding-bottom` parameter of a responsive embed container.
+@function responsive-embed($ratio) {
+ $w: nth($ratio, 1);
+ $h: nth($ratio, 3);
+ @return $h / $w * 100%;
+}
+
+/// Creates a responsive embed container.
+/// @param {List} $ratio [$responsive-embed-ratio] - Ratio to use for the container, formatted as `x by y`.
+@mixin responsive-embed($ratio: $responsive-embed-ratio) {
+ position: relative;
+ height: 0;
+ padding-bottom: responsive-embed($ratio);
+ margin-bottom: $responsive-embed-margin-bottom;
+ overflow: hidden;
+
+ iframe,
+ object,
+ embed,
+ video {
+ position: absolute;
+ top: 0;
+ #{$global-left}: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+@mixin foundation-responsive-embed {
+ .responsive-embed, .flex-video {
+ @include responsive-embed;
+
+ &.widescreen {
+ padding-bottom: responsive-embed($responsive-embed-ratio-widescreen);
+ }
+ }
+}
+
+@mixin flex-video($ratio: $responsive-embed-ratio) {
+ @warn 'This mixin is being replaced by responsive-embed(). flex-video() will be removed in Foundation 6.4.';
+ position: relative;
+ height: 0;
+ padding-bottom: responsive-embed($ratio);
+ margin-bottom: $responsive-embed-margin-bottom;
+ overflow: hidden;
+
+ iframe,
+ object,
+ embed,
+ video {
+ position: absolute;
+ top: 0;
+ #{$global-left}: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
@import 'components/dropdown-menu';
@import 'components/dropdown';
@import 'components/flex';
-@import 'components/flex-video';
+@import 'components/responsive-embed';
@import 'components/label';
@import 'components/media-object';
@import 'components/menu';
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
- @include foundation-flex-video;
+ @include foundation-responsive-embed;
@include foundation-label;
@include foundation-media-object;
@include foundation-off-canvas;
// 15. Drilldown
// 16. Dropdown
// 17. Dropdown Menu
-// 18. Flex Video
-// 19. Forms
-// 20. Label
-// 21. Media Object
-// 22. Menu
-// 23. Meter
-// 24. Off-canvas
-// 25. Orbit
-// 26. Pagination
-// 27. Progress Bar
+// 18. Forms
+// 19. Label
+// 20. Media Object
+// 21. Menu
+// 22. Meter
+// 23. Off-canvas
+// 24. Orbit
+// 25. Pagination
+// 26. Progress Bar
+// 27. Responsive Embed
// 28. Reveal
// 29. Slider
// 30. Switch
$dropdownmenu-background: $white;
$dropdownmenu-border: 1px solid $medium-gray;
-// 18. Flex Video
-// --------------
-
-$flexvideo-margin-bottom: rem-calc(16);
-$flexvideo-ratio: 4 by 3;
-$flexvideo-ratio-widescreen: 16 by 9;
-
-// 19. Forms
+// 18. Forms
// ---------
$fieldset-border: 1px solid $medium-gray;
$input-number-spinners: true;
$input-radius: $global-radius;
-// 20. Label
+// 19. Label
// ---------
$label-background: $primary-color;
$label-padding: 0.33333rem 0.5rem;
$label-radius: $global-radius;
-// 21. Media Object
+// 20. Media Object
// ----------------
$mediaobject-margin-bottom: $global-margin;
$menu-item-background-active: map-get($foundation-palette, primary);
$menu-icon-spacing: 0.25rem;
-// 23. Meter
+// 22. Meter
// ---------
$meter-height: 1rem;
$meter-fill-medium: $warning-color;
$meter-fill-bad: $alert-color;
-// 24. Off-canvas
+// 23. Off-canvas
// --------------
$offcanvas-size: 250px;
$maincontent-class: 'off-canvas-content';
$maincontent-shadow: 0 0 10px rgba($black, 0.5);
-// 25. Orbit
+// 24. Orbit
// ---------
$orbit-bullet-background: $medium-gray;
$orbit-control-padding: 1rem;
$orbit-control-zindex: 10;
-// 26. Pagination
+// 25. Pagination
// --------------
$pagination-font-size: rem-calc(14);
$pagination-mobile-items: false;
$pagination-arrows: true;
-// 27. Progress Bar
+// 26. Progress Bar
// ----------------
$progress-height: 1rem;
$progress-meter-background: $primary-color;
$progress-radius: $global-radius;
+// 27. Responsive Embed
+// --------------
+
+$responsive-embed-margin-bottom: rem-calc(16);
+$responsive-embed-ratio: 4 by 3;
+$responsive-embed-ratio-widescreen: 16 by 9;
+
// 28. Reveal
// ----------
@import "true";
@import '../../scss/global';
-@import '../../scss/components/flex-video';
+@import '../../scss/components/responsive-embed';
@import '../../scss/grid/grid';
@include test-module('Components') {
-
- @include test('Flex Video [function]') {
- $test: flex-video(3 by 4);
+
+ @include test('Responsive Embed [function]') {
+ $test: responsive-embed(3 by 4);
$expect: 4 / 3 * 100%;
@include assert-equal($test, $expect,
projects / thirdparty / foundation / foundation-sites.git / commitdiff
