Initial commit

jessicarush · Jun 2, 2020 · 4ead1d2 · 4ead1d2
1 parent f694c21
commit 4ead1d2
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 0 deletions.
diff --git a/css_scalable_iframe/base.css b/css_scalable_iframe/base.css
@@ -0,0 +1,68 @@
+@charset "UTF-8";
+
+
+
+/* VARIABLES -------------------------------------------------------------- */
+
+:root {
+  --heading-font: 'Open Sans', sans-serif;
+  --main-font: 'Open Sans', sans-serif;
+  --minor-font: 'Open Sans', sans-serif;
+  --heading-color: rgba(0,0,50,.9);
+  --main-color: rgba(70,70,90,.9);
+  --minor-color: rgb(190,190,200);
+  --emphasis-color: rgb(27,211,165);
+}
+
+
+/* DEFAULTS --------------------------------------------------------------- */
+
+html {
+  color: var(--main-color);
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+body {
+  max-width: 1000px;
+}
+
+/* TYPOGRAPHY ------------------------------------------------------------- */
+
+.primary-heading {
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-size: 2rem;
+  font-weight: 400;
+}
+
+.highlight-text {
+  color: var(--emphasis-color);
+}
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+/* COMPONENTS ------------------------------------------------------------- */
+
+.video-content {
+  width: 100%;
+  padding-top: 56.25%;
+  position: relative;
+}
+
+.video-content iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/* COSMETIC --------------------------------------------------------------- */
+
+/* UTILITY ---------------------------------------------------------------- */
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_scalable_iframe/index.html b/css_scalable_iframe/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Site | Page</title>
+  <link href="base.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
+</head>
+
+<body>
+
+  <header>
+    <h1 class="primary-heading">CSS Scalable iframe</h1>
+    <nav></nav>
+  </header>
+
+  <main>
+    <p> This is useful specifically for embeded youtube videos. By default these use iframes. What we want to do is set the iframe to be 100% width of its contaoner and have the height automatically scale to an aspect ratio of 16:9, or 56.25% of the width. There is a <a href="https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/" target="_blank">good explantion of this here</a>.</p>
+
+    <p>If you were to set the height of an element to be 56.25%, this would be calculated from the height of the parent element (provided the parent element has a defined height). But padding can be used as a sort of hack because a padding value specified as a perecent, is always <strong>% of the width of the containing element</strong>. In other words, a padding-top of 56.25% will give us our aspect ratio of 16:9. From there we can just use absolute positioning to place our iframe on top:</p>
+
+    <div class="video-content">
+      <iframe src="https://www.youtube.com/embed/qI8-3kF5nlU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </div>
+
+
+  </main>
+
+  <footer>
+  </footer>
+
+</body>
+</html>