Skip to content

Commit 4ead1d2

Browse files
author
jessicarush
committed
Initial commit
1 parent f694c21 commit 4ead1d2

File tree

2 files changed

+102
-0
lines changed

2 files changed

+102
-0
lines changed

‎css_scalable_iframe/base.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
@charset "UTF-8";
2+
3+
4+
5+
/* VARIABLES -------------------------------------------------------------- */
6+
7+
:root {
8+
--heading-font: 'Open Sans', sans-serif;
9+
--main-font: 'Open Sans', sans-serif;
10+
--minor-font: 'Open Sans', sans-serif;
11+
--heading-color: rgba(0,0,50,.9);
12+
--main-color: rgba(70,70,90,.9);
13+
--minor-color: rgb(190,190,200);
14+
--emphasis-color: rgb(27,211,165);
15+
}
16+
17+
18+
/* DEFAULTS --------------------------------------------------------------- */
19+
20+
html {
21+
color: var(--main-color);
22+
font-family: var(--main-font);
23+
font-size: 16px;
24+
font-weight: 400;
25+
}
26+
27+
body {
28+
max-width: 1000px;
29+
}
30+
31+
/* TYPOGRAPHY ------------------------------------------------------------- */
32+
33+
.primary-heading {
34+
color: var(--heading-color);
35+
font-family: var(--heading-font);
36+
font-size: 2rem;
37+
font-weight: 400;
38+
}
39+
40+
.highlight-text {
41+
color: var(--emphasis-color);
42+
}
43+
44+
/* LINKS & BUTTONS -------------------------------------------------------- */
45+
46+
/* LAYOUT ----------------------------------------------------------------- */
47+
48+
/* COMPONENTS ------------------------------------------------------------- */
49+
50+
.video-content {
51+
width: 100%;
52+
padding-top: 56.25%;
53+
position: relative;
54+
}
55+
56+
.video-content iframe {
57+
width: 100%;
58+
height: 100%;
59+
position: absolute;
60+
top: 0;
61+
left: 0;
62+
}
63+
64+
/* COSMETIC --------------------------------------------------------------- */
65+
66+
/* UTILITY ---------------------------------------------------------------- */
67+
68+
/* STATE ------------------------------------------------------------------ */

‎css_scalable_iframe/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Site | Page</title>
7+
<link href="base.css" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
13+
<header>
14+
<h1 class="primary-heading">CSS Scalable iframe</h1>
15+
<nav></nav>
16+
</header>
17+
18+
<main>
19+
<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>
20+
21+
<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>
22+
23+
<div class="video-content">
24+
<iframe src="https://www.youtube.com/embed/qI8-3kF5nlU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
25+
</div>
26+
27+
28+
</main>
29+
30+
<footer>
31+
</footer>
32+
33+
</body>
34+
</html>

0 commit comments

Comments
 (0)