diff --git a/README.md b/README.md
index 27475f52..4866a0e8 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# NIAID Design System (NDS)
-VERSION 1.2.0
+VERSION 1.3.0
The [NIAID Design System](https://designsystem.niaid.nih.gov/) was developed within the Office of Communications and Government Relations (OCGR) at the National Institute of Allergy and Infectious Diseases (NIAID) by Booz Allen Hamilton. The design system is designed to aid users with the process of creating policy-compliant websites that conform to design standards and guidance set by NIAID, NIH, HHS, and USWDS.
diff --git a/package-lock.json b/package-lock.json
index 9db48c85..fe1aa625 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "niaid-design-system",
- "version": "1.2.0",
+ "version": "1.3.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index e8a1de1d..2ca0f2f9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "niaid-design-system",
- "version": "1.2.0",
+ "version": "1.3.0",
"description": "NIAID Design System",
"main": "public/index.html",
"dependencies": {
diff --git a/src/_patterns/00-nds/01-atoms/media/media-video-stream/_media-video-stream-main.twig b/src/_patterns/00-nds/01-atoms/media/media-video-stream/_media-video-stream-main.twig
new file mode 100644
index 00000000..3cd8558b
--- /dev/null
+++ b/src/_patterns/00-nds/01-atoms/media/media-video-stream/_media-video-stream-main.twig
@@ -0,0 +1,35 @@
+{#
+ ---
+ title: Media Stream Video
+ ---
+
+ Type: Atoms -> Media
+
+ Description:
+ The Media YouTube Video component makes it easy to embed YouTube videos on your website.
+
+ The "media_video_stream_src" parameter requires a specific embed URL from YouTube (not to be confused with the regular URL to the video page). To get this embed link, go to the YouTube video you would like to embed. Select "Share" below the video, then "Embed". The needed URL is found as the value for the "src" attribute in the displayed embed code.
+
+ Parameters:
+ media_video_stream_classes: Additional media element classes.
+ media_video_stream_id: ID for the video wrapper.
+ media_video_stream_title: The title attribute for the video.
+ media_video_stream_src: The embed URL from YouTube.
+ media_video_stream_height: Desired height of the video.
+ media_video_stream_width: Desired width of the video.
+ media_video_stream_attributes: Additional attributes on the
+
\ No newline at end of file
diff --git a/src/_patterns/00-nds/01-atoms/media/media-video-stream/demo/media-video-stream.twig b/src/_patterns/00-nds/01-atoms/media/media-video-stream/demo/media-video-stream.twig
new file mode 100644
index 00000000..f716fa71
--- /dev/null
+++ b/src/_patterns/00-nds/01-atoms/media/media-video-stream/demo/media-video-stream.twig
@@ -0,0 +1,6 @@
+{% include "@nds/01-atoms/media/media-video-stream/_media-video-stream-main.twig" with
+ {
+ "media_video_stream_title": "Video: Helping Kids with Severe Eczema",
+ "media_video_stream_src": "https://www.youtube.com/embed/p-NVeGnK71w?rel=0",
+ }
+%}
\ No newline at end of file
diff --git a/src/_patterns/00-nds/01-atoms/media/media-video-stream/media-video-stream.scss b/src/_patterns/00-nds/01-atoms/media/media-video-stream/media-video-stream.scss
new file mode 100644
index 00000000..83553809
--- /dev/null
+++ b/src/_patterns/00-nds/01-atoms/media/media-video-stream/media-video-stream.scss
@@ -0,0 +1,14 @@
+.media--video-stream {
+ position: relative;
+ padding-bottom: 51.44%; /* 16:9 */
+ padding-top: 20px;
+ height: 0;
+}
+
+.media--video-stream__iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
diff --git a/src/_patterns/00-nds/01-atoms/media/media-video-youtube/_media-video-youtube-main.twig b/src/_patterns/00-nds/01-atoms/media/media-video-youtube/_media-video-youtube-main.twig
deleted file mode 100644
index 5987fa8e..00000000
--- a/src/_patterns/00-nds/01-atoms/media/media-video-youtube/_media-video-youtube-main.twig
+++ /dev/null
@@ -1,35 +0,0 @@
-{#
- ---
- title: Media YouTube Video
- ---
-
- Type: Atoms -> Media
-
- Description:
- The Media YouTube Video component makes it easy to embed YouTube videos on your website.
-
- The "media_video_youtube_src" parameter requires a specific embed URL from YouTube (not to be confused with the regular URL to the video page). To get this embed link, go to the YouTube video you would like to embed. Select "Share" below the video, then "Embed". The needed URL is found as the value for the "src" attribute in the displayed embed code.
-
- Parameters:
- media_video_youtube_classes: Additional media element classes.
- media_video_youtube_id: ID for the video wrapper.
- media_video_youtube_title: The title attribute for the video.
- media_video_youtube_src: The embed URL from YouTube.
- media_video_youtube_height: Desired height of the video.
- media_video_youtube_width: Desired width of the video.
- media_video_youtube_attributes: Additional attributes on the
-
\ No newline at end of file
diff --git a/src/_patterns/00-nds/01-atoms/media/media-video-youtube/demo/media-video-youtube.twig b/src/_patterns/00-nds/01-atoms/media/media-video-youtube/demo/media-video-youtube.twig
deleted file mode 100644
index a6e2a923..00000000
--- a/src/_patterns/00-nds/01-atoms/media/media-video-youtube/demo/media-video-youtube.twig
+++ /dev/null
@@ -1,8 +0,0 @@
-{% include "@nds/01-atoms/media/media-video-youtube/_media-video-youtube-main.twig" with
- {
- "media_video_youtube_title": "Video: Helping Kids with Severe Eczema",
- "media_video_youtube_src": "https://www.youtube.com/embed/p-NVeGnK71w?rel=0",
- "media_video_youtube_height": "315",
- "media_video_youtube_width": "560"
- }
-%}
\ No newline at end of file
diff --git a/src/_patterns/00-nds/01-atoms/media/media-video-youtube/media-video-youtube.scss b/src/_patterns/00-nds/01-atoms/media/media-video-youtube/media-video-youtube.scss
deleted file mode 100644
index b5dd42cf..00000000
--- a/src/_patterns/00-nds/01-atoms/media/media-video-youtube/media-video-youtube.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.media--video-youtube {
- position: relative;
- @extend .m-0;
-}
\ No newline at end of file
diff --git a/src/_patterns/00-nds/02-molecules/components/component-video/_component-video-main.twig b/src/_patterns/00-nds/02-molecules/components/component-video/_component-video-main.twig
new file mode 100644
index 00000000..a94bad2e
--- /dev/null
+++ b/src/_patterns/00-nds/02-molecules/components/component-video/_component-video-main.twig
@@ -0,0 +1,60 @@
+{#
+ ---
+ title: Video Component
+ ---
+
+ Type: Molecules -> Components
+
+ Description:
+ The Video component makes it easy to include videos of either type (YouTube or Microsoft). Additionally, you can control the float (left or right placement) of your images.
+
+ Blocks:
+ {% block component_video %}: The media to be presented.
+
+ Parameters:
+ component_video_classes: Additional media component classes.
+ component_video_float: The direction to float the component (optional). Options: "left", "right", "full" (100% width of body content).
+ component_video_title: Title of the video.
+ component_video_src: Path to the video.
+ component_video_attributes: Sets attributes for the video.
+ component_video_width: Sets the pixel width of the video.
+ component_video_height: Sets the pixel height of the video.
+
+ Includes:
+ Atoms -> Media -> media-video-stream
+
+ Last Updated: October 23, 2023
+#}
+{% set component_video_classes = component_video_classes|default() %}
+{% set component_video_float = component_video_float|default() %}
+{% set component_video_id = component_video_id|default() %}
+{% set component_video_title = component_video_title|default() %}
+{% set component_video_src = component_video_src|default() %}
+{% set component_video_attributes = component_video_attributes|default() %}
+{% set component_video_width = component_video_width|default() %}
+{% set component_video_height = component_video_stream_height|default() %}
+
+{% if component_video_float == "left" or component_video_float == "align-left" %}
+ {% set component_video_classes = component_video_classes ~ " component--video__left" %}
+{% endif %}
+{% if component_video_float == "right" or component_video_float == "align-right" %}
+ {% set component_video_classes = component_video_classes ~ " component--video__right" %}
+{% endif %}
+{% if component_video_float == "full" or component_video_float == "align-center" %}
+ {% set component_video_classes = component_video_classes ~ " component--video__full" %}
+{% endif %}
+
+
+ {% block component_video %}
+ {% include "@nds/01-atoms/media/media-video-stream/_media-video-stream-main.twig" with
+ {
+ "media_video_stream_id": component_video_id,
+ "media_video_stream_title": component_video_title,
+ "media_video_stream_src": component_video_src,
+ "media_video_stream_width": component_video_width,
+ "media_video_stream_height": component_video_height,
+ "media_video_stream_attributes": component_video_attributes
+ }
+ %}
+ {% endblock %}
+
diff --git a/src/_patterns/00-nds/02-molecules/components/component-video/component-video.scss b/src/_patterns/00-nds/02-molecules/components/component-video/component-video.scss
new file mode 100644
index 00000000..db8f8394
--- /dev/null
+++ b/src/_patterns/00-nds/02-molecules/components/component-video/component-video.scss
@@ -0,0 +1,96 @@
+.component--video {
+ margin: $s-1-50 0;
+ max-width: 100%;
+ width: 100%;
+}
+
+.component--video__full {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.component--video__left,
+.component--video__right {
+ clear: both;
+ @include media-breakpoint-up(md) {
+ max-width: 50%;
+ }
+}
+
+.component--video__left {
+ @include media-breakpoint-up(md) {
+ float: left;
+ margin-right: $s-3;
+ }
+}
+
+.component--video__right {
+ @include media-breakpoint-up(md) {
+ float: right;
+ margin-left: $s-3;
+ }
+}
+
+@include media-breakpoint-up(md) {
+ .component--video__25-width {
+ max-width: 25%;
+ width: 25%;
+ }
+
+ .component--video__33-width {
+ max-width: 33%;
+ width: 33%;
+ }
+
+ .component--video__50-width {
+ max-width: 50%;
+ width: 50%;
+ }
+
+ .component--video__75-width {
+ max-width: 75%;
+ width: 75%;
+ }
+}
+
+
+.component--video__100-width {
+ width: 100%;
+}
+
+/* Drupal Overrides */
+[data-entity-embed-display="view_mode:media.25_width"] {
+ @include media-breakpoint-up(lg) {
+ max-width: 25%;
+ width: 25%;
+ }
+}
+
+[data-entity-embed-display="view_mode:media.33_width"] {
+ @include media-breakpoint-up(lg) {
+ max-width: 33%;
+ width: 33%;
+ }
+}
+
+[data-entity-embed-display="view_mode:media.50_width"] {
+ @include media-breakpoint-up(lg) {
+ max-width: 50%;
+ width: 50%;
+ }
+}
+
+[data-entity-embed-display="view_mode:media.75_width"] {
+ @include media-breakpoint-up(lg) {
+ max-width: 75%;
+ width: 75%;
+ }
+}
+
+[data-entity-embed-display="view_mode:media.100_width"] {
+ width: 100%;
+ @include media-breakpoint-up(lg) {
+ max-width: 100%;
+ }
+}
+/* End Drupal Overrides */
\ No newline at end of file
diff --git a/src/_patterns/00-nds/02-molecules/components/component-video/demo/component-video.twig b/src/_patterns/00-nds/02-molecules/components/component-video/demo/component-video.twig
new file mode 100644
index 00000000..4037ec26
--- /dev/null
+++ b/src/_patterns/00-nds/02-molecules/components/component-video/demo/component-video.twig
@@ -0,0 +1,6 @@
+{% include "@nds/02-molecules/components/component-video/_component-video-main.twig" with
+ {
+ "component_video_title": "Video: Helping Kids with Severe Eczema",
+ "component_video_src": "https://www.youtube.com/embed/p-NVeGnK71w?rel=0",
+ }
+%}
\ No newline at end of file