Import the pebble dev site into devsite/

devsite/source/_sass/elements/video.scss

@@ -0,0 +1,71 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.video {
+  margin: auto;
+  width: 100%;
+
+  .video__wrapper {
+    height: 0;
+    position: relative;
+  }
+
+  iframe {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}
+
+.video--widescreen .video__wrapper {
+  padding-bottom: 56.25%;
+}
+
+.video--standard .video__wrapper {
+  padding-bottom: 75%;
+}
+
+.video--preview {
+  cursor: pointer;
+
+  .video__wrapper::after {
+    background-color: rgba(200, 200, 200, 0.8);
+    border-radius: 50%;
+    color: #444;
+    content: '\f144';
+    font-family: FontAwesome;
+    font-size: 80px;
+    left: 50%;
+    line-height: 68px;
+    margin-left: -40px;
+    margin-top: -40px;
+    padding: 10px;
+    position: absolute;
+    top: 50%;
+    @include transition(color 0.3s linear);
+    @include transition(background-color 0.3s linear);
+  }
+
+  &:hover {
+
+    .video__wrapper::after {
+      background-color: rgba(50, 50, 50, 0.8);
+      color: #d00;
+    }
+  }
+}