Training:Videos: Difference between revisions

Videos

Revision as of 23:39, 18 January 2024

Training

EXPLORE MDriven through Video

INTRODUCING THE MDRIVEN VIDEO EXPERIENCE
Watch videos tailored to simplify everything you need to know about MDriven.

Check out the official MDriven YouTube here: www.youtube.com/@MDrivenOfficial

@@ Line 76: / Line 76: @@
 <html>
 <style>
-   .youtube-video-row {
+  youtube-video-row {
      display: flex;
      flex-wrap: wrap;
-     justify-content: space-around;
+     justify-content: center;
-     gap: 20px; /* Adjust the space between videos */
+     gap: 10px; /* Space between videos */
-    padding: 10px;
 }
-.youtube-video-row iframe {
+/* Targeting iframes directly inside the .youtube-video-row */
-     flex: 1 0 30%; /* Each video takes up roughly 30% of the container width */
+.youtube-video-row > iframe {
-     max-width: 360px; /* Maximum width of each video */
+     flex: 1;
-     border-radius: 10px; /* Optional: Rounded corners for the video */
+    min-width: 300px; /* Minimum width of each video */
+     max-width: 360px; /* Maximum width to ensure videos are not too large */
+     border-radius: 15px; /* Rounded corners */
+    overflow: hidden; /* Ensures the border-radius applies to the iframe */
+    height: 203px; /* Adjust height based on the aspect ratio */
 }
 @media (max-width: 768px) {
-     .youtube-video-row iframe {
+     .youtube-video-row > iframe {
-         flex-basis: 100%; /* On smaller screens, each video takes full width */
+         flex-basis: 100%; /* Full width on smaller screens */
+        max-width: 100%; /* Allows the video to expand fully on smaller screens */
+        height: auto; /* Adjust height for smaller screens */
      }
 }