style pass to embedded videos
MODIFY
src/assets/docs.scss
src/assets/docs.scss
margin-top: var(--micro);
}
- p > iframe {
+ p + .video-container {
margin-top: var(--medium);
}
@apply border-t border-solid border-gray-400;
}
+ .video-container {
+ position: relative;
+ overflow: hidden;
+ max-width: 100%;
+ max-height: 315px;
+ width: 560px;
+ margin: auto;
+
+ &::after {
+ display: block;
+ content: "";
+ padding-top: 56.25%;
+ }
+
iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
width: 100%;
+ height: 100%;
+ }
}
}

MODIFY
src/routes/docs/configuration.md
src/routes/docs/configuration.md
@@ -6,8 +6,12 @@ section: configuration
Gitpod dev environments are started with a single click. In order to make sure they come fully initialized and with the tools you need, you should provide a configuration file.
+<div class="video-container">
+
`youtube: ZgY6a78mAnQ`
+</div>
+
## Setup Assistant
The setup assistant can help you get started with this. Once you open a project without a `.gitpod.yml` you should see a notification in the bottom right that lets you start the assistant.

MODIFY
src/routes/docs/getting-started.md
src/routes/docs/getting-started.md
@@ -15,8 +15,12 @@ You can start using Gitpod with one or more of the following ways:
- Enable [GitLab Integration](#gitlab-integration)
- Quick start using an [Example Project](#example-project) or [OSS Project](#gitpodified-open-source-project)
+<div class="video-container">
+
`youtube: ZZ0_TQ6UApY`
+</div>
+
## Prefixed URL
You can quickly open a new workspace for your project using a context URL like repository, branch, pull request, issue, or file. Just prefix the URL in the address bar of your browser with `gitpod.io/#`.

MODIFY
src/routes/docs/index.md
src/routes/docs/index.md
@@ -10,8 +10,12 @@ With Gitpod it is the same - we treat dev environments as automated resources yo
This is what is at the heart of Gitpod: **an open platform that removes all friction of manually setting up and maintaining dev environments** allowing yourself and your team to build applications quicker and more collaboratively.
+<div class="video-container">
+
`youtube: d6D-OUPnJeg`
+</div>
+
<h2>Gitpod Concepts</h2>
Gitpod seamlessly integrates in your workflow and works with all major git hosting platforms including GitHub, GitLab and Bitbucket. It understands the context you are in and adjusts your dev environment accordingly. For example, if you create a Gitpod workspace from a Pull or Merge Request, Gitpod will open a fully-initialized dev environment in code-review mode.

MODIFY
src/routes/docs/prebuilds.md
src/routes/docs/prebuilds.md
@@ -8,8 +8,12 @@ Whenever your code changes (e.g. when new commits are pushed to your repository)
Then, when you do create a new workspace on a branch, or Pull/Merge Request, for which a prebuild exists, this workspace will load much faster, because all dependencies will have been already downloaded ahead of time, and your code will be already compiled.
+<div class="video-container">
+
`youtube: KR8ESjGYsXI`
+</div>
+
## Enable Prebuilt Workspaces
### On Bitbucket

MODIFY
src/routes/docs/sharing-and-collaboration.md
src/routes/docs/sharing-and-collaboration.md
@@ -9,8 +9,12 @@ There are two different ways to share your workspaces:
- [Sharing Running Workspaces](#sharing-running-workspaces)
- [Sharing Snapshots](#sharing-snapshots)
+<div class="video-container">
+
`youtube: 9RftoWFzJ2s`
+</div>
+
## Sharing Running Workspaces
Sharing running workspaces makes it possible to quickly look at a workspace together with a (remote) colleague.

style pass to embedded videos