new video theme stuff

web/themes/custom/dchadwick/css/style.css

@@ -33,6 +33,10 @@ main {
   margin: auto;
 }
 
+#main {
+  z-index: 9999;
+}
+
 #fighter__personal-info .fieldset-wrapper, #fighter__stats .fieldset-wrapper {
   display: flex;
   flex-flow: wrap;
@@ -206,6 +210,7 @@ table.cols-5 td.incorrect {
 
 #block-dchadwick-homepagehero {
   position: relative;
+  max-height: 400px;
 }
 #block-dchadwick-homepagehero .field--name-field-media-image {
   max-height: 400px;
@@ -230,7 +235,6 @@ table.cols-5 td.incorrect {
   border-radius: 5px;
   color: #f6c177;
 }
-
 #footer {
   text-align: center;
   background: #c4a7e7;
@@ -248,7 +252,6 @@ table.cols-5 td.incorrect {
 #recent-fights {
   background: #fffaf3;
   border: 2px solid #6e6a86;
-  padding: 2rem;
 }
 #recent-fights > div {
   grid-gap: 5px;

web/themes/custom/dchadwick/src/sass/partials/hero.scss

@@ -1,5 +1,6 @@
 #block-dchadwick-homepagehero {
   position: relative;
+  max-height: 400px;
 
   .field--name-field-media-image {
     max-height: 400px;
@@ -31,4 +32,10 @@
     // opacity: 0.95;
 
   }
+
+  #bgVideo {
+
+  }
+
 }
+

web/themes/custom/dchadwick/src/sass/partials/main.scss

@@ -2,3 +2,6 @@ main {
   max-width: $container-full;
   margin: auto;
 }
+ #main  {
+  z-index: 9999;
+ }

web/themes/custom/dchadwick/src/sass/partials/recent-fights.scss

@@ -1,7 +1,6 @@
 #recent-fights {
   background: $surface;
   border: 2px solid $muted;
-  padding: 2rem;
 
   > div {
     grid-gap: 5px;

web/themes/custom/dchadwick/templates/field/file-video.html.twig

@@ -0,0 +1,24 @@
+{#
+/**
+* @file
+* Default theme implementation to display the file entity as a video tag.
+*
+* Available variables:
+* - attributes: An array of HTML attributes, intended to be added to the
+*   video tag.
+* - files: And array of files to be added as sources for the video tag. Each
+*   element is an array with the following elements:
+*   - file: The full file object.
+*   - source_attributes: An array of HTML attributes for to be added to the
+*     source tag.
+*
+* @ingroup themeable
+*/
+#}
+{{ attach_library('bootstrap5/file') }}
+
+<video id="bgVideo" autoplay muted loop>
+  {% for file in files %}
+    <source {{ file.source_attributes }} />
+  {% endfor %}
+</video>