am c4c51746: am 18985e76: am 30b16ac6: am 95a1818f: Merge "docs: Add styles for embedded videos to match DevSite" into mnc-preview-docs
* commit 'c4c51746cb5f1965b5174bf56f2b4f8c8f59b646':
docs: Add styles for embedded videos to match DevSite
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 @@
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:
*******************/