From d96221f206ee0f74446fc47b955b716ac8667667 Mon Sep 17 00:00:00 2001
From: jimmyfrasche <soapboxcicero@gmail.com>
Date: Sun, 22 Apr 2018 15:58:49 -0700
Subject: [PATCH] doc: make front page video respond to layout changes (1/2)

The videos on the front page are always the same width, regardless of
the viewport width. These changes let the video fill the space given
to its container regardless of layout. It uses the standard hack for
making iframes responsive, but the videos are loaded at random and do
not have uniform aspect ratios so that information is injected into the
DOM using custom properties. If these are not supported, it falls back
to the same layout present before this change.

Note: this change also requires CL 108678 to complete the fix,
though either CL without the other is harmless.

Updates #24997.

Change-Id: I2f93dc21ffe01d99ce0e175e9dd0e3d486fddc9f
Reviewed-on: https://go-review.googlesource.com/108677
Run-TryBot: Andrew Bonventre <andybons@golang.org>
TryBot-Result: Gobot Gobot <gobot@golang.org>
Reviewed-by: Andrew Bonventre <andybons@golang.org>
---
 doc/root.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/doc/root.html b/doc/root.html
index a5119a9ff822ed..545b28d2d5c6aa 100644
--- a/doc/root.html
+++ b/doc/root.html
@@ -74,7 +74,7 @@
 <div class="left">
   <div id="video">
     <div class="rootHeading">Featured video</div>
-    <iframe width="415" height="241" src="//www.youtube.com/embed/ytEkHepK08c" frameborder="0" allowfullscreen></iframe>
+	<div class="js-frontpage-video" style="--aspect-ratio-padding: 58.07%;"><iframe width="415" height="241" src="//www.youtube.com/embed/ytEkHepK08c" frameborder="0" allowfullscreen></iframe></div>
   </div>
 </div>
 
@@ -153,6 +153,10 @@
 		];
 		var v = videos[Math.floor(Math.random()*videos.length)];
 		$('#video iframe').attr('height', v.h).attr('src', v.s);
+		// Compute the aspect ratio (as a percentage) of the video
+		// using the fixed width 415 and the height of the current video, v.h.
+		var ar = 100*v.h/415;
+		$('.js-frontpage-video').attr('style', '--aspect-ratio-padding: ' + ar + '%;');
 	});
 
 	{{end}}