Add new CSS styling for video

Testing a new CSS implementation for the video containers
- Should auto-size to a maximum width (defaulted with 500px)

Author: santaimpersonator

docs/introduction.md

@@ -18,7 +18,7 @@ icon: material/book-open-page-variant
 
 	<center>
 
-	<article class="video-container">
+	<article class="video-500px">
 	<iframe src="https://www.youtube.com/embed/A9NTdowiY_o" title="Product Showcase Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 	![QR code to product video](./assets/img/qr_code/product_video.png){ .qr width=100 }
 	</article>
@@ -352,7 +352,7 @@ To get started, users will need a few items. Some users may already have a few o
 		<div style="max-height=400px;" markdown>
 
 		<center>
-		<div class="video-container">
+		<div class="video-500px">
 		<iframe src="https://www.youtube.com/embed/x0RDEHqFIF8" title="SparkFun's Qwiic Connect System" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 		![QR code to instructional video](./assets/img/qr_code/qwiic_video.png){ .qr width=100 }

docs/stylesheet/extra.css

@@ -366,6 +366,22 @@
   overflow: hidden;
 }
 
+.video-500px {
+  position: relative;
+  padding-bottom: min(281.25px, 56.25%); /* 16:9 */
+  height: 0;
+	max-width: 500px;
+	max-height: 281.25px;
+}
+.video-500px iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+	overflow: hidden;
+}
+
 /* Add compatibility for mobile devices */
 /* ================================================================================== */
 /* ================================================================================== */