Skip to content

Commit 3139a85

Browse files
committed
feat: Responsive video embeds
1 parent 52a0bd3 commit 3139a85

4 files changed

Lines changed: 23 additions & 5 deletions

File tree

.markdownlint.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
"details",
2424
"summary",
2525
"a",
26-
"br"
26+
"br",
27+
"div"
2728
]
2829
},
2930

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/* Defines the styling used by https://embedresponsively.com/ to let us embed responsive YouTube videos. */
2+
3+
.embed-container {
4+
position: relative;
5+
padding-bottom: 56.25%;
6+
height: 0;
7+
overflow: hidden;
8+
max-width: 100%; }
9+
10+
.embed-container iframe, .embed-container object, .embed-container embed {
11+
position: absolute;
12+
top: 0;
13+
left: 0;
14+
width: 100%;
15+
height: 100%;
16+
}

content/pop-basics.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ Pop!\_OS 24.04 includes the [COSMIC desktop environment](https://system76.com/co
2727

2828
The <u>Launcher</u> is a search-based utility for accessing and opening applications and files. This video demonstrates the powerful funcationality of the COSMIC Launcher:
2929

30-
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/zHuXKCPbX9E' frameborder='0' allowfullscreen></iframe></div>
30+
<div class='embed-container'><iframe src='https://www.youtube.com/embed/zHuXKCPbX9E' frameborder='0' allowfullscreen></iframe></div>
3131

3232
To open the Launcher, press the <kbd>SUPER</kbd> key, which is usually located between the `Fn` and `Alt` keys (and may have an icon with a window on it). You can also click the Launcher magnifying glass icon in the dock.
3333

@@ -82,7 +82,7 @@ Adjust system settings and personal preferences like the look and feel of the de
8282

8383
This video shows the auto-tiling and window stacking features of the COSMIC desktop:
8484

85-
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/xTb5VhctG50' frameborder='0' allowfullscreen></iframe></div>
85+
<div class='embed-container'><iframe src='https://www.youtube.com/embed/xTb5VhctG50' frameborder='0' allowfullscreen></iframe></div>
8686

8787
- Click the tiling icon in the top right of the panel to access tiling settings.
8888
- Toggle the `Tile current workspace` option to activate or deactivate tiling in the current workspace.
@@ -103,7 +103,7 @@ Accessing <u>Workspaces</u> will show an overview of all open windows, available
103103

104104
This video shows the Workspaces functionality in Pop!\_OS 24.04:
105105

106-
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/hqgk5tMfI3A' frameborder='0' allowfullscreen></iframe></div>
106+
<div class='embed-container'><iframe src='https://www.youtube.com/embed/hqgk5tMfI3A' frameborder='0' allowfullscreen></iframe></div>
107107

108108
By default, there are three ways to access the Workspaces overview:
109109

nuxt.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,8 @@ export default async () => ({
6464
'@fortawesome/fontawesome-svg-core/styles.css',
6565
'@system76/design/dist/minimal.common.css',
6666
'@system76/components/dist/index.common.css',
67-
'~/assets/styles/code-highlighting.css'
67+
'~/assets/styles/code-highlighting.css',
68+
'~/assets/styles/responsive-videos.css'
6869
],
6970

7071
plugins: [

0 commit comments

Comments
 (0)