diff --git a/content/_includes/embed.macros.njk b/content/_includes/embed.macros.njk
index 6784d4d7c..164cb6584 100644
--- a/content/_includes/embed.macros.njk
+++ b/content/_includes/embed.macros.njk
@@ -132,27 +132,66 @@ note: |
params:
src:
type: url
- height:
+ width:
type: number
default: none
- width:
+ height:
type: number
default: none
#}
{% macro _video(
src,
- height=none,
- width=none
+ width=none,
+ height=none
) %}
- {%- set src = '/assets/media/' + src -%}
- {%- set style = {
- 'height': height,
- 'width': width
- } -%}
-
+ {%- set src = '/assets/media/' + src -%}
+ {%- set style = {
+ 'height': height,
+ 'width': width
+ } -%}
+
{% endmacro %}
+{# @docs
+label: _youtube
+category: Embed
+note: Embed a video from Youtube
+params:
+ id:
+ type: string
+ width:
+ type: number
+ default: none
+ height:
+ type: number
+ default: none
+ span:
+ type: number | 'full'
+ default: none
+ note: Span multiple columns of a gallery
+#}
+{% macro _youtube(
+ id,
+ width=none,
+ height=none,
+ span=none
+) -%}
+ {%- set width = width or 560 -%}
+ {%- set height = height or 315 -%}
+ {%- set style = {
+ '--ratio': (width / height),
+ '--width': '100%',
+ '--span': span
+ } -%}
+
+
+
+{%- endmacro %}
+
+
{# Private macro used to generate figure content from data #}
{% macro _fig_content(
data
@@ -173,13 +212,13 @@ params:
{%- elif item.svg -%}
{{- svg(item.svg, item.alt) | safe -}}
{%- elif item.iframe -%}
- {{- iframe(item.iframe, item.width, item.height, item.span) -}}
+ {{- _iframe(item.iframe, item.width, item.height, item.span) -}}
{%- elif item.audio -%}
{{- audio(item.audio, item.span) -}}
{%- elif item.youtube -%}
{{- _youtube(item.youtube, item.width, item.height, item.span) -}}
{%- elif item.video -%}
- {{- _video(item.video, item.height, item.width) -}}
+ {{- _video(item.video, item.width, item.height) -}}
{%- endif -%}
{%- endfor -%}
{%- endmacro %}
@@ -399,7 +438,7 @@ params:
{# @docs
-label: iframe
+label: _iframe
category: Embed
note: |
Embed an iframe (most often used for videos).
@@ -419,7 +458,7 @@ params:
default: none
note: Span multiple columns of a gallery
#}
-{% macro iframe(
+{% macro _iframe(
src,
width=none,
height=none,
@@ -465,36 +504,6 @@ params:
{%- endmacro %}
-{# @docs
-label: _youtube
-category: Embed
-note: Embed a video from Youtube
-params:
- id:
- type: string
-#}
-{% macro _youtube(
- id,
- width,
- height,
- span=none
-) -%}
- {%- set width = width or 560 -%}
- {%- set height = height or 315 -%}
- {% set has_ratio = width | typeCheck('number') and height | typeCheck('number') %}
- {%- set style = {
- '--ratio': (width / height) if has_ratio else null,
- '--width': '100%',
- '--span': span
- } -%}
-
-
-
-{%- endmacro %}
-
-
{# @docs
label: ratio
category: Layout
diff --git a/content/blog/2017/css-day.md b/content/blog/2017/css-day.md
index 9b82c2504..fb3f8c5a4 100644
--- a/content/blog/2017/css-day.md
+++ b/content/blog/2017/css-day.md
@@ -39,7 +39,7 @@ leading to her recent [SVG Animations] book from O'Reilly.
## Color Theory for people who code SVG and CSS by [Natalya Shelburne]
-{{ embed.figure(data=[{youtube:'aq3u001QMcM'}]) }}
+{{ embed.figure(data=[{ youtube: 'aq3u001QMcM' }]) }}
- [Slides](https://docs.google.com/presentation/d/1ytSMRNpNrD9CWms351X4xelQuJT24tIqKnIzSbe2OQ0/edit?usp=sharing)
@@ -47,7 +47,7 @@ leading to her recent [SVG Animations] book from O'Reilly.
## Applying the principles of functional programming to CSS by [Ben Adam]
-{{ embed.figure(data=[{youtube:'7g0BHu0kWXo'}]) }}
+{{ embed.figure(data=[{ youtube: '7g0BHu0kWXo' }]) }}
- [Slides](https://css-day.surge.sh/)
@@ -55,13 +55,13 @@ leading to her recent [SVG Animations] book from O'Reilly.
## Code Patterns for Pattern Making by [Miriam Suzanne]
-{{ embed.figure(data=[{youtube:'lK_akjzOUY0'}]) }}
+{{ embed.figure(data=[{ youtube: 'lK_akjzOUY0' }]) }}
[Miriam Suzanne]: https://twitter.com/TerribleMia/
## The In-Betweeners of Responsive Web Design by [Pralie Dutzel]
-{{ embed.figure(data=[{youtube:'WLAVc18Ugoc'}]) }}
+{{ embed.figure(data=[{ youtube: 'WLAVc18Ugoc' }]) }}
- [Slides](http://praliedutzel.com/talks/betweeners-responsive-web-design/)
@@ -69,13 +69,13 @@ leading to her recent [SVG Animations] book from O'Reilly.
## Style Guide-Driven Development: Documentation that Does Work by [Jan Jorgensen]
-{{ embed.figure(data=[{youtube:'9Fknadsepd4'}]) }}
+{{ embed.figure(data=[{ youtube: '9Fknadsepd4' }]) }}
[Jan Jorgensen]: https://twitter.com/ramblinjan
## The Great State of Design by [Stacy Kvernmo]
-{{ embed.figure(data=[{youtube:'pnbT4HdcSwM'}]) }}
+{{ embed.figure(data=[{ youtube: 'pnbT4HdcSwM' }]) }}
- [Slides](https://www.slideshare.net/Funstacy/the-great-state-of-design-with-css-grid-layout-and-friends)
@@ -94,7 +94,7 @@ jQuery to CSS for web and mobile applications.
## Solving CSS at scale with your own UI framework by [CJ Cenizal]
-{{ embed.figure(data=[{youtube:'CbPYf9FslXw'}]) }}
+{{ embed.figure(data=[{ youtube: 'CbPYf9FslXw' }]) }}
[CJ Cenizal]: https://twitter.com/TheCJCenizal
diff --git a/content/blog/2022/shared-elements.md b/content/blog/2022/shared-elements.md
index 36732306f..8819b4794 100644
--- a/content/blog/2022/shared-elements.md
+++ b/content/blog/2022/shared-elements.md
@@ -148,7 +148,7 @@ And earlier this year,
presented a new proposal & prototype,
which makes that possible!
-{{ embed.figure(data=[{youtube:'JCJUPJ_zDQ4'}]) }}
+{{ embed.figure(data=[{ youtube: 'JCJUPJ_zDQ4' }]) }}
1. We can use the `page-transition-tag` property in CSS
to give each element a name.
@@ -219,7 +219,7 @@ If you haven't encountered FLIP before,
[Cassie Evans](https://www.cassie.codes/)
is a great resource on the topic:
-{{ embed.figure(data=[{youtube: 'kUDMwy2OaK4'}]) }}
+{{ embed.figure(data=[{ youtube: 'kUDMwy2OaK4' }]) }}
Cassie also gave a brilliant talk at SmashingConf
about FLIP animations in responsive design.
diff --git a/content/blog/2023/components.md b/content/blog/2023/components.md
index 6f88fa599..97e15630b 100644
--- a/content/blog/2023/components.md
+++ b/content/blog/2023/components.md
@@ -639,7 +639,6 @@ walking us through the steps:
{{ embed.figure(
data=[{
youtube: 'R4Ri4ft7bXY',
- title: 'The Good, The Bad, and The Web Components',
span: 'full'
}],
caption='Hmmm, yeah. He already said it. I bet others have to. Why did I write this?'
diff --git a/content/talks/css-is-rad.md b/content/talks/css-is-rad.md
index 0a01a13ec..a6887f935 100644
--- a/content/talks/css-is-rad.md
+++ b/content/talks/css-is-rad.md
@@ -41,8 +41,6 @@ events:
slides: https://slides.oddbird.net/css-is-rad/
media: &frfe
youtube: bSITeqDKkb8
- width: 560
- height: 315
- venue: Smashing Conf NY
url: https://smashingconf.com/ny-2019/
date: 2019-10-15