diff --git a/docroot/profiles/custom/cgov_site/themes/custom/cgov/src/styles/_brp.scss b/docroot/profiles/custom/cgov_site/themes/custom/cgov/src/styles/_brp.scss index 4fd209ac6a..9be1edaaa4 100644 --- a/docroot/profiles/custom/cgov_site/themes/custom/cgov/src/styles/_brp.scss +++ b/docroot/profiles/custom/cgov_site/themes/custom/cgov/src/styles/_brp.scss @@ -30,6 +30,7 @@ $gray: #9e9e9e; position: relative; overflow: hidden; height: 0; + /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) x width 100% */ padding-bottom: 56.25%; text-align: center; @@ -273,9 +274,10 @@ $gray: #9e9e9e; img { width: 100%; } + /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) x width 100% */ padding-bottom: 56.25%; } } } } -} \ No newline at end of file +} diff --git a/docroot/profiles/custom/cgov_site/themes/custom/cgov/src/styles/_nci-foundation_variables.scss b/docroot/profiles/custom/cgov_site/themes/custom/cgov/src/styles/_nci-foundation_variables.scss index 107cfb5ee1..bf56165bc2 100644 --- a/docroot/profiles/custom/cgov_site/themes/custom/cgov/src/styles/_nci-foundation_variables.scss +++ b/docroot/profiles/custom/cgov_site/themes/custom/cgov/src/styles/_nci-foundation_variables.scss @@ -435,7 +435,7 @@ $flex-video-padding-top: em-calc(0); // $flex-video-margin-bottom: em-calc(16); // We use this to control widescreen bottom padding - +/* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) x width 100% */ $flex-video-widescreen-padding-bottom: 56.25%; // diff --git a/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/entrypoints/ckeditor/ckeditor-ck-scope.scss b/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/entrypoints/ckeditor/ckeditor-ck-scope.scss index 484d3af8fc..6d890b7dc6 100644 --- a/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/entrypoints/ckeditor/ckeditor-ck-scope.scss +++ b/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/entrypoints/ckeditor/ckeditor-ck-scope.scss @@ -258,6 +258,7 @@ figure { .flex-video { margin-bottom: 0; position: relative; + /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) x width 100% */ padding-bottom: 56.25%; padding-top: 0px; overflow: hidden; diff --git a/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/legacy/styles/_nci-foundation_variables.scss b/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/legacy/styles/_nci-foundation_variables.scss index 7b3a5b9c05..ad512a6ef2 100644 --- a/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/legacy/styles/_nci-foundation_variables.scss +++ b/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/legacy/styles/_nci-foundation_variables.scss @@ -413,7 +413,7 @@ $flex-video-padding-top: em-calc(0); // $flex-video-margin-bottom: em-calc(16); // We use this to control widescreen bottom padding - +/* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) x width 100% */ $flex-video-widescreen-padding-bottom: 56.25%; // diff --git a/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-inline-video/index.scss b/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-inline-video/index.scss index 7e90553f11..69c4611b0d 100644 --- a/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-inline-video/index.scss +++ b/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-inline-video/index.scss @@ -8,8 +8,7 @@ // removed for audio described link // overflow:hidden @include u-padding-top(0); - // Legacy css - we shoulnt use percents - // todo - clean up to use tokens + /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) x width 100% */ padding-bottom: 56.25%; background-color: color($theme-color-accent-cool-darker); @@ -25,8 +24,9 @@ } &__audio_described { - // Legacy css - we shoulnt use percents - // todo - clean up to use tokens + + /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) x width 100% */ + /* plus the extra height for audio described */ padding-bottom: calc(56.25% + 48px); } @@ -75,6 +75,7 @@ @include u-margin-bottom(0); overflow: hidden; @include u-padding-top(0); + /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) x width 100% */ padding-bottom: 56.25%; background-color: color($theme-color-accent-cool-darker); diff --git a/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-video/index.scss b/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-video/index.scss index e503ebda0e..b8d9de61b8 100644 --- a/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-video/index.scss +++ b/docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-video/index.scss @@ -28,6 +28,7 @@ margin-bottom: 0; overflow: hidden; padding-top: 0; + /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) x width 100% */ padding-bottom: 56.25%; background-color: color($theme-color-accent-cool-darker);