Merge "docs: Add styles for embedded videos to match DevSite" into mnc-preview-docs

1 files changed, 63 insertions, 0 deletions

diff --git a/tools/droiddoc/templates-sdk/assets/css/default.css b/tools/droiddoc/templates-sdk/assets/css/default.css
index 8297407..693027a 100644
--- a/tools/droiddoc/templates-sdk/assets/css/default.css
+++ b/tools/droiddoc/templates-sdk/assets/css/default.css
@@ -5129,6 +5129,69 @@ a.video-shadowbox-button.white:after {
   content:url("../images/play-circle-grey.png") url("../images/play-circle-grey_2x.png");
 }
 
+/*
+ * Responsive YouTube embeds from DevSite
+ *
+ * When applied to a <div> that wraps a video, "video-wrapper" forces the video
+ * to float right at 50% of the column width on desktop, but appear as a block
+ * element at 100% of the column width on smaller screens.
+ * "video-wrapper-full-width" works the same but is always 100% width.
+ */
+.video-wrapper,
+.video-wrapper-left {
+  float: right;
+  margin: 0 0 40px 40px;
+  padding-top: calc(((100% - 40px) / 2) / 16 * 9); /* 16:9 including margin */
+  position: relative;
+  width: calc((100% - 40px) / 2);                  /* 50% including margin */
+}
+
+/*
+ * "video-wrapper-left" forces 50% without the float
+ * This is useful for heading content when you want the video to
+ * appear next to an element that is already floated right
+ * (e.g. tb-wrapper <div>)
+ */
+.video-wrapper-left {
+  float: none;
+  margin: 16px 0 20px 0;
+}
+
+.video-wrapper-full-width {
+  margin: 16px 0;
+  padding-top: 56.25%; /* Forces div to 16:9 at 100% width */
+  position: relative;
+  width: 100%;
+}
+
+.video-wrapper embed,
+.video-wrapper iframe,
+.video-wrapper object,
+.video-wrapper-full-width embed,
+.video-wrapper-full-width iframe,
+.video-wrapper-full-width object,
+.video-wrapper-left embed,
+.video-wrapper-left iframe,
+.video-wrapper-left object {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+@media screen and (max-width: 1000px) {
+
+  .video-wrapper,
+  .video-wrapper-left {
+    float: none;
+    margin: 16px 0;
+    padding-top: 56.25%; /* Forces div to 16:9 at 100% width */
+    width: 100%;
+  }
+}
+
+
 /******************
 Styles for d.a.c/index:
 *******************/