<!-- Default -->
<div class="s-embed">
<iframe src="https://www.youtube-nocookie.com/embed/yyPFT3Ajkzc" frameborder="0" allowfullscreen></iframe>
</div>
<!-- Widescreen -->
<div class="s-embed s-embed--widescreen">
<iframe src="https://www.youtube-nocookie.com/embed/rGkQDrUcX18" frameborder="0" allowfullscreen></iframe>
</div>
<div class="s-embed{% for mod in mods %} s-embed--{{ mod}}{% endfor %}">
<iframe src="{{ src }}" frameborder="0" allowfullscreen></iframe>
</div>
/* Default */
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": {
"year": [
348,
344,
340,
336,
332,
328,
324,
320,
316,
312,
308,
304,
300,
296,
292,
288
],
"day": [
360,
353,
346,
339,
332,
325,
318,
311,
304,
297,
290,
283,
276,
269,
262,
255,
248,
241,
234,
227,
220,
213,
206,
199
]
},
"src": "https://www.youtube-nocookie.com/embed/yyPFT3Ajkzc"
}
/* Widescreen */
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": {
"year": [
348,
344,
340,
336,
332,
328,
324,
320,
316,
312,
308,
304,
300,
296,
292,
288
],
"day": [
360,
353,
346,
339,
332,
325,
318,
311,
304,
297,
290,
283,
276,
269,
262,
255,
248,
241,
234,
227,
220,
213,
206,
199
]
},
"src": "https://www.youtube-nocookie.com/embed/rGkQDrUcX18",
"mods": [
"widescreen"
]
}
.s-embed {
position: relative;
overflow: hidden;
height: 0;
max-width: 100%;
padding-bottom: 75%; /* 4:3 */
iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
}
.s-embed--widescreen {
padding-bottom: 56.25%; /* 16:9 */
}
There are no notes for this item.